@rolder/kit 3.0.0-alpha.85 → 3.0.0-alpha.86

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

@@ -1,3 +1,11 @@
-export declare const Message: ({ messageId }: {
+import { type StackProps } from '@mantine/core';
+import type { UIMessage } from 'ai';
+import { type ReactNode } from 'react';
+export interface MessageProps<TMessage extends UIMessage> extends Omit<StackProps, 'children'> {
+    children: ({ parts, role, }: {
+        parts: TMessage['parts'];
+        role: TMessage['role'];
+    }) => ReactNode;
     messageId: string;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}
+export declare const Message: <TMessage extends UIMessage>(props: MessageProps<TMessage>) => React.JSX.Element;

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

@@ -1,23 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import { Paper } from "@mantine/core";
-import { Streamdown } from "streamdown";
-import { getIsStreaming, useChatMessage, useChatMessagePart } from "./store/index.js";
-const Message = ({ messageId })=>{
+import { Stack } from "@mantine/core";
+import { memo } from "react";
+import { useChatMessage } from "./store/index.js";
+const Message = /*#__PURE__*/ memo(({ children, messageId, ...props })=>{
     const message = useChatMessage(messageId);
-    const part = useChatMessagePart(messageId, 'text');
-    console.log('Message render', message);
-    return part?.text ? /*#__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: getIsStreaming() && 'assistant' === message.role,
-            children: part?.text
-        })
-    }) : null;
-};
+    console.log('Message render');
+    return /*#__PURE__*/ jsx(Stack, {
+        ...props,
+        children: 'function' == typeof children ? children({
+            parts: message.parts,
+            role: message.role
+        }) : null
+    });
+});
 export { Message };

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

@@ -10,6 +10,8 @@ export interface ChatRootProps extends PaperProps {
     scrollAreaProps?: Omit<ScrollAreaProps, 'children' | 'h'>;
     withScrollButton?: boolean;
     stackProps?: Omit<StackProps, 'p'>;
+    emptyComponent?: ReactNode;
+    loaderComponent?: ReactNode;
     chatOptions?: UseChatOptions<UIMessage> & ChatInit<UIMessage>;
 }
 /**

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

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Messages } from "./Messages.js";
+import { Messages } from "./messages/index.js";
 import { useInitChat } from "./store/index.js";
 const ChatInitializer = ({ chatOptions })=>{
     useInitChat(chatOptions);

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

@@ -1,13 +1,11 @@
 export declare const Chat: {
     Root: ({ chatOptions, ...props }: import("./Root").ChatRootProps) => import("react/jsx-runtime").JSX.Element;
-    Message: ({ messageId }: {
-        messageId: string;
-    }) => import("react/jsx-runtime").JSX.Element | null;
-    File: ({ messageId }: {
-        messageId: string;
-    }) => import("react/jsx-runtime").JSX.Element | null;
-    Empty: () => import("react/jsx-runtime").JSX.Element | null;
-    Loader: (props: import("@mantine/core").LoaderProps) => import("react/jsx-runtime").JSX.Element | null;
+    Message: <TMessage extends import("ai").UIMessage>(props: import("./Message").MessageProps<TMessage>) => React.JSX.Element;
+    TextPart: import("react").MemoExoticComponent<({ part, role }: import("./parts").TextPartProps) => import("react/jsx-runtime").JSX.Element>;
+    ToolPart: <TPart extends import("ai").ToolUIPart = {
+        type: `tool-${string}`;
+    } & import("ai").UIToolInvocation<import("ai").UITool>>(props: import("./parts").ToolPartProps<TPart>) => import("react").ReactNode;
+    FilePart: ({ part, messageId }: import("./parts/File").FilePartProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export { ChatInput } from './chatInput';
 export * from './store';

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

@@ -1,15 +1,14 @@
-import { Empty } from "./Empty.js";
-import { File } from "./File.js";
-import { Loader } from "./Loader.js";
 import { Message } from "./Message.js";
+import { TextPart, ToolPart } from "./parts/index.js";
+import { FilePart } from "./parts/File.js";
 import { Root } from "./Root.js";
 import { ChatInput } from "./chatInput/index.js";
 export * from "./store/index.js";
 const Chat = {
     Root: Root,
     Message: Message,
-    File: File,
-    Empty: Empty,
-    Loader: Loader
+    TextPart: TextPart,
+    ToolPart: ToolPart,
+    FilePart: FilePart
 };
 export { Chat, ChatInput };

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

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare const Empty: ({ emptyComponent }: {
+    emptyComponent?: ReactNode;
+}) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { Stack, Text } from "@mantine/core";
+import { getIsEmpty } from "../store/index.js";
+const Empty = ({ emptyComponent })=>getIsEmpty() ? emptyComponent ?? /*#__PURE__*/ jsx(Stack, {
+        align: "center",
+        gap: 0,
+        children: /*#__PURE__*/ jsx(Text, {
+            children: "Нет сообщений"
+        })
+    }) : null;
+export { Empty };

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

@@ -0,0 +1,5 @@
+import { type LoaderProps } from '@mantine/core';
+import type { ReactNode } from 'react';
+export declare const Loader: ({ loaderComponent, ...props }: LoaderProps & {
+    loaderComponent?: ReactNode;
+}) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;

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

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

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

@@ -0,0 +1,2 @@
+import type { ChatRootProps } from '../Root';
+export declare const Messages: ({ children, height, radius, padding, scrollAreaProps, withScrollButton, stackProps, emptyComponent, loaderComponent, ...props }: Omit<ChatRootProps, "chatOptions">) => import("react/jsx-runtime").JSX.Element;

package/dist/ai/ui/chat/{Messages.js → messages/Messages.js}

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Paper, Stack } from "@mantine/core";
-import { ScrollArea } from "../../../ui/index.js";
-import { useChatMessageIds } from "./store/index.js";
-const Messages = ({ children, height, radius = 'md', padding = 'md', scrollAreaProps, withScrollButton = true, stackProps, ...props })=>{
+import { ScrollArea } from "../../../../ui/index.js";
+import { useChatMessageIds } from "../store/index.js";
+import { Empty } from "./Empty.js";
+import { Loader } from "./Loader.js";
+const Messages = ({ children, height, radius = 'md', padding = 'md', scrollAreaProps, withScrollButton = true, stackProps, emptyComponent, loaderComponent, ...props })=>{
     const messageIds = useChatMessageIds();
     console.log('Messages render');
     return /*#__PURE__*/ jsx(Paper, {
@@ -15,10 +17,17 @@ const Messages = ({ children, height, radius = 'md', padding = 'md', scrollAreaP
             radius: radius,
             ...scrollAreaProps,
             children: [
-                /*#__PURE__*/ jsx(Stack, {
+                /*#__PURE__*/ jsxs(Stack, {
                     p: padding,
                     ...stackProps,
-                    children: 'function' == typeof children ? children(messageIds) : null
+                    children: [
+                        messageIds.length ? 'function' == typeof children ? children(messageIds) : null : /*#__PURE__*/ jsx(Empty, {
+                            emptyComponent: emptyComponent
+                        }),
+                        /*#__PURE__*/ jsx(Loader, {
+                            loaderComponent: loaderComponent
+                        })
+                    ]
                 }),
                 withScrollButton && /*#__PURE__*/ jsx(ScrollArea.ScrollButton, {})
             ]

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

@@ -0,0 +1 @@
+export * from './Messages';

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

@@ -0,0 +1 @@
+export * from "./Messages.js";

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

@@ -0,0 +1,6 @@
+import type { FileUIPart } from 'ai';
+export interface FilePartProps<TPart extends FileUIPart = FileUIPart> {
+    part: TPart;
+    messageId: string;
+}
+export declare const FilePart: ({ part, messageId }: FilePartProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,9 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Image, Paper } from "@mantine/core";
 import { FileIcon } from "./FileIcon.js";
-import { useChatMessagePart } from "./store/index.js";
-const File = ({ messageId })=>{
-    const part = useChatMessagePart(messageId, 'file');
+const FilePart = ({ part, messageId })=>{
     const textFileType = messageId.split('-')[1];
     const FileComponent = ()=>{
         switch(textFileType){
@@ -40,4 +38,4 @@ const File = ({ messageId })=>{
         children: /*#__PURE__*/ jsx(FileComponent, {})
     }) : null;
 };
-export { File };
+export { FilePart };

package/dist/ai/ui/chat/parts/TextPart.d.ts

@@ -0,0 +1,6 @@
+import type { TextUIPart, UIMessage } from 'ai';
+export interface TextPartProps {
+    part: TextUIPart;
+    role: UIMessage['role'];
+}
+export declare const TextPart: import("react").MemoExoticComponent<({ part, role }: TextPartProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/ai/ui/chat/parts/TextPart.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { Paper } from "@mantine/core";
+import { memo } from "react";
+import { Streamdown } from "streamdown";
+const TextPart = /*#__PURE__*/ memo(({ part, role })=>{
+    console.log('TextPart render', part.text?.length);
+    return /*#__PURE__*/ jsx(Paper, {
+        radius: "md",
+        px: "md",
+        py: "sm",
+        maw: "80%",
+        ml: 'user' === role ? 'auto' : void 0,
+        bg: 'user' === role ? 'var(--mantine-color-default-hover)' : 'var(--mantine-primary-color-light)',
+        fz: "sm",
+        children: /*#__PURE__*/ jsx(Streamdown, {
+            isAnimating: 'streaming' === part.state,
+            children: part?.text
+        })
+    });
+});
+export { TextPart };

package/dist/ai/ui/chat/parts/ToolPart.d.ts

@@ -0,0 +1,9 @@
+import type { ToolUIPart } from 'ai';
+import { type ReactNode } from 'react';
+export interface ToolPartProps<TPart extends ToolUIPart = ToolUIPart> {
+    children: (toolOutput: NonNullable<TPart['output']>) => ReactNode;
+    part: TPart;
+    loader?: ReactNode;
+    onError?: (error: string) => ReactNode;
+}
+export declare const ToolPart: <TPart extends ToolUIPart = ToolUIPart>(props: ToolPartProps<TPart>) => ReactNode;

package/dist/ai/ui/chat/parts/ToolPart.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader, Text } from "@mantine/core";
+import { memo } from "react";
+const ToolPart = /*#__PURE__*/ memo(({ children, part, loader, onError })=>{
+    console.log('ToolPart render', part.state);
+    switch(part.state){
+        case 'input-available':
+            return loader || /*#__PURE__*/ jsx(Loader, {
+                size: 28,
+                type: "dots"
+            });
+        case 'output-available':
+            return part.output ? children(part.output) : null;
+        case 'output-error':
+            return onError ? onError(part.errorText) : /*#__PURE__*/ jsxs(Text, {
+                c: "red",
+                children: [
+                    "Ошибка: ",
+                    part.errorText
+                ]
+            });
+        default:
+            return null;
+    }
+});
+export { ToolPart };

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

@@ -0,0 +1,2 @@
+export * from './TextPart';
+export * from './ToolPart';

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

@@ -0,0 +1,2 @@
+export * from "./TextPart.js";
+export * from "./ToolPart.js";

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

@@ -1,5 +1,4 @@
-export * from './messageIds';
-export * from './messagesMap';
+export * from './messages';
 export * from './send';
 export * from './states';
 export * from './useInitChat';

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

@@ -1,5 +1,4 @@
-export * from "./messageIds.js";
-export * from "./messagesMap.js";
+export * from "./messages.js";
 export * from "./send.js";
 export * from "./states.js";
 export * from "./useInitChat.js";

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

@@ -0,0 +1,9 @@
+import type { UIMessage } from 'ai';
+export declare const $chatMessageIds: import("nanostores").PreinitializedWritableAtom<string[]> & object;
+export declare const useChatMessageIds: () => string[];
+export declare const $chatMessages: import("nanostores").PreinitializedMapStore<Record<string, UIMessage<unknown, import("ai").UIDataTypes, import("ai").UITools>>> & object;
+export declare const getChatMessage: <TMessage extends UIMessage>(messageId: string) => TMessage | undefined;
+export declare const useChatMessage: <TMessage extends UIMessage>(messageId: string) => TMessage;
+export declare const addChatMessage: <TMessage extends UIMessage>(newMessage: TMessage) => void;
+export declare const setChatMessages: <TMessage extends UIMessage>(messages: TMessage[]) => void;
+export declare const getIsEmpty: () => boolean;

package/dist/ai/ui/chat/store/{messageIds.js → messages.js}

@@ -1,13 +1,18 @@
 import { useStore } from "@nanostores/react";
-import { atom, computed, onSet } from "nanostores";
-import { $chatMessages } from "./messagesMap.js";
+import { atom, computed, map, onSet } from "nanostores";
 const $chatMessageIds = atom([]);
-const getChatMessages = ()=>$chatMessageIds.get().map((id)=>$chatMessages.get()[id]);
 const useChatMessageIds = ()=>useStore($chatMessageIds);
 onSet($chatMessageIds, ({ newValue, abort })=>{
     const currentValue = $chatMessageIds.get();
     if (currentValue.length === newValue.length && currentValue.every((id, index)=>id === newValue[index])) abort();
 });
+const $chatMessages = map({});
+const getChatMessage = (messageId)=>$chatMessages.get()[messageId];
+const useChatMessage = (messageId)=>useStore($chatMessages, {
+        keys: [
+            messageId
+        ]
+    })[messageId];
 const addChatMessage = (newMessage)=>{
     $chatMessageIds.set([
         ...$chatMessageIds.get(),
@@ -37,5 +42,4 @@ const setChatMessages = (messages)=>{
 };
 const $isEmpty = computed($chatMessageIds, (messages)=>0 === messages.length);
 const getIsEmpty = ()=>$isEmpty.get();
-const useIsEmpty = ()=>useStore($isEmpty);
-export { $chatMessageIds, addChatMessage, getChatMessages, getIsEmpty, setChatMessages, useChatMessageIds, useIsEmpty };
+export { $chatMessageIds, $chatMessages, addChatMessage, getChatMessage, getIsEmpty, setChatMessages, useChatMessage, useChatMessageIds };

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

@@ -4,7 +4,6 @@ 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 getChatError: () => string | undefined;
 export declare const setChatError: (error: string | undefined) => void;

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

@@ -8,10 +8,9 @@ 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 $chatError = atom();
 const getChatError = ()=>$chatError.get();
 const setChatError = (error)=>$chatError.set(error);
 const useChatError = ()=>useStore($chatError);
-export { getChatError, getChatStatus, getIsLoading, getIsStreaming, setChatError, setChatStatus, useChatError, useChatStatus, useIsLoading, useIsStreaming };
+export { getChatError, getChatStatus, getIsLoading, setChatError, setChatStatus, useChatError, useChatStatus, useIsLoading, useIsStreaming };

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

@@ -1,7 +1,7 @@
 import { useChat } from "@ai-sdk/react";
 import { notifications } from "@mantine/notifications";
 import { useEffect } from "react";
-import { setChatMessages } from "./messageIds.js";
+import { setChatMessages } from "./messages.js";
 import { setChatSendMessage } from "./send.js";
 import { setChatError, setChatStatus } from "./states.js";
 const useInitChat = (props)=>{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolder/kit",
-  "version": "3.0.0-alpha.85",
+  "version": "3.0.0-alpha.86",
   "type": "module",
   "exports": {
     ".": {

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

@@ -1 +0,0 @@
-export declare const Empty: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,21 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Stack, Text } from "@mantine/core";
-import { useIsEmpty } from "./store/index.js";
-const Empty = ()=>{
-    const isEmpty = useIsEmpty();
-    return isEmpty ? /*#__PURE__*/ jsxs(Stack, {
-        align: "center",
-        gap: 0,
-        children: [
-            /*#__PURE__*/ jsx(Text, {
-                children: "Нет сообщений"
-            }),
-            /*#__PURE__*/ jsx(Text, {
-                size: "sm",
-                c: "dimmed",
-                children: "Начните общение, чтобы увидеть сообщения здесь"
-            })
-        ]
-    }) : null;
-};
-export { Empty };

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

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

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

@@ -1,2 +0,0 @@
-import { type LoaderProps } from '@mantine/core';
-export declare const Loader: (props: LoaderProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,2 +0,0 @@
-import type { ChatRootProps } from './Root';
-export declare const Messages: ({ children, height, radius, padding, scrollAreaProps, withScrollButton, stackProps, ...props }: Omit<ChatRootProps, "chatOptions">) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +0,0 @@
-import type { UIMessage } from 'ai';
-export declare const $chatMessageIds: import("nanostores").PreinitializedWritableAtom<string[]> & object;
-export declare const getChatMessages: <T extends UIMessage>() => T[];
-export declare const useChatMessageIds: () => string[];
-export declare const addChatMessage: (newMessage: UIMessage) => void;
-export declare const setChatMessages: <T extends UIMessage>(messages: T[]) => void;
-export declare const getIsEmpty: () => boolean;
-export declare const useIsEmpty: () => boolean;

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

@@ -1,5 +0,0 @@
-import type { UIDataTypes, UIMessage, UIMessagePart, UITools } from 'ai';
-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 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 | undefined;

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

@@ -1,15 +0,0 @@
-import { useStore } from "@nanostores/react";
-import { map } from "nanostores";
-const $chatMessages = map({});
-const getChatMessage = (messageId)=>$chatMessages.get()[messageId];
-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;
-};
-export { $chatMessages, getChatMessage, useChatMessage, useChatMessagePart };