@rolder/kit 3.0.0-alpha.6 → 3.0.0-alpha.8

package/src/ui/scrollArea/useScrollArea.ts

@@ -0,0 +1,227 @@
+import {
+  useDebouncedCallback,
+  useMergedRef,
+  useResizeObserver,
+} from '@mantine/hooks';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { ScrollAreaState, ScrollPosition } from './types';
+
+interface UseScrollAreaOptions {
+  autoScroll?: boolean;
+  scrollToBottomOnInit?: boolean;
+  animated?: boolean;
+  nearThreshold?: number;
+}
+
+export const useScrollAreaState = (
+  options: UseScrollAreaOptions = {},
+): ScrollAreaState => {
+  const {
+    autoScroll = false,
+    scrollToBottomOnInit = false,
+    animated = true,
+    nearThreshold = 32,
+  } = options;
+
+  const scrollAreaRef = useRef<HTMLDivElement | null>(null);
+  const isUserInteractingRef = useRef(false);
+  const userInteractionTimeoutRef = useRef<NodeJS.Timeout | undefined>(
+    undefined,
+  );
+  const isInitializedRef = useRef(false);
+
+  // Единый ResizeObserver для отслеживания изменений размера контента
+  const [contentResizeRef, contentRect] = useResizeObserver();
+
+  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({
+    scrollTop: 0,
+    clientHeight: 0,
+    scrollHeight: 0,
+  });
+
+  // Вычисляемые состояния позиции
+  const isAtTop = scrollPosition.scrollTop === 0;
+  const isAtBottom =
+    scrollPosition.scrollTop + scrollPosition.clientHeight >=
+    scrollPosition.scrollHeight;
+  const isNearTop = scrollPosition.scrollTop <= nearThreshold;
+  const isNearBottom =
+    scrollPosition.scrollTop + scrollPosition.clientHeight >=
+    scrollPosition.scrollHeight - nearThreshold;
+  const isAboveCenter =
+    scrollPosition.scrollTop <
+    (scrollPosition.scrollHeight - scrollPosition.clientHeight) / 2;
+  const hasScrollableContent =
+    scrollPosition.scrollHeight > scrollPosition.clientHeight;
+
+  // Используем useDebouncedCallback для оптимизации производительности
+  const debouncedUpdatePosition = useDebouncedCallback(
+    (element: HTMLElement) => {
+      const newPosition: ScrollPosition = {
+        scrollTop: element.scrollTop,
+        clientHeight: element.clientHeight,
+        scrollHeight: element.scrollHeight,
+      };
+
+      setScrollPosition(newPosition);
+    },
+    { delay: 16 }, // 60fps
+  );
+
+  // Методы управления прокруткой
+  const scrollToTop = useCallback(
+    (isAnimated?: boolean) => {
+      const element = scrollAreaRef.current;
+      if (!element) return;
+
+      const shouldAnimate = isAnimated ?? animated;
+
+      if (shouldAnimate) {
+        element.scrollTo({ top: 0, behavior: 'smooth' });
+      } else {
+        element.scrollTop = 0;
+      }
+    },
+    [animated],
+  );
+
+  const scrollToBottom = useCallback(
+    (isAnimated?: boolean) => {
+      const element = scrollAreaRef.current;
+      if (!element) return;
+
+      const shouldAnimate = isAnimated ?? animated;
+
+      if (shouldAnimate) {
+        element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
+      } else {
+        element.scrollTop = element.scrollHeight;
+      }
+
+      // Запоминаем scrollHeight до скролла
+      const scrollHeightBefore = element.scrollHeight;
+
+      // Проверка результата и повтор если нужно
+      setTimeout(() => {
+        const scrollHeightAfter = element.scrollHeight;
+        const diff =
+          element.scrollHeight - (element.scrollTop + element.clientHeight);
+
+        if (diff > 1 && scrollHeightAfter !== scrollHeightBefore) {
+          // ScrollHeight изменился после скролла - повторяем
+          element.scrollTop = element.scrollHeight;
+        }
+      }, 50);
+    },
+    [animated],
+  );
+
+  // Универсальная функция автоскролла
+  const performAutoScroll = useCallback(() => {
+    if (!autoScroll || isUserInteractingRef.current || !scrollAreaRef.current) {
+      return;
+    }
+
+    // Для автоскролла используем isAtBottom (точная позиция)
+    if (isAtBottom) {
+      scrollToBottom(false);
+    }
+  }, [autoScroll, isAtBottom, scrollToBottom]);
+
+  // Детекция пользовательского взаимодействия
+  const handleUserInteraction = useCallback(() => {
+    isUserInteractingRef.current = true;
+
+    if (userInteractionTimeoutRef.current) {
+      clearTimeout(userInteractionTimeoutRef.current);
+    }
+
+    userInteractionTimeoutRef.current = setTimeout(() => {
+      isUserInteractingRef.current = false;
+    }, 150);
+  }, []);
+
+  // Обработчик скролла
+  const handleScroll = useCallback(
+    (event: Event) => {
+      const element = event.target as HTMLElement;
+      debouncedUpdatePosition(element);
+    },
+    [debouncedUpdatePosition],
+  );
+
+  // Прокрутка к концу при инициализации
+  useEffect(() => {
+    if (!scrollToBottomOnInit || isInitializedRef.current) {
+      return;
+    }
+
+    if (hasScrollableContent) {
+      scrollToBottom(animated);
+      isInitializedRef.current = true;
+    }
+  }, [scrollToBottomOnInit, hasScrollableContent, scrollToBottom, animated]);
+
+  // Единый эффект для автоскролла при изменении контента
+  useEffect(() => {
+    const element = scrollAreaRef.current;
+
+    if (!element || contentRect.height === 0) {
+      return;
+    }
+
+    // Обновляем позицию
+    debouncedUpdatePosition(element);
+
+    // Автоскролл с небольшой задержкой
+    const timeoutId = setTimeout(performAutoScroll, 10);
+
+    return () => clearTimeout(timeoutId);
+  }, [contentRect.height, debouncedUpdatePosition, performAutoScroll]);
+
+  // Установка обработчиков событий
+  useEffect(() => {
+    const element = scrollAreaRef.current;
+    if (!element) return;
+
+    const events = ['wheel', 'touchstart', 'touchmove', 'mousedown'] as const;
+
+    element.addEventListener('scroll', handleScroll);
+    events.forEach((event) => {
+      element.addEventListener(event, handleUserInteraction);
+    });
+
+    // Инициализация позиции
+    debouncedUpdatePosition(element);
+
+    return () => {
+      element.removeEventListener('scroll', handleScroll);
+      events.forEach((event) => {
+        element.removeEventListener(event, handleUserInteraction);
+      });
+
+      if (userInteractionTimeoutRef.current) {
+        clearTimeout(userInteractionTimeoutRef.current);
+      }
+    };
+  }, [handleScroll, handleUserInteraction, debouncedUpdatePosition]);
+
+  // Единый ref
+  const callbackRef = useMergedRef(scrollAreaRef);
+
+  return {
+    isAtTop,
+    isNearTop,
+    isAtBottom,
+    isNearBottom,
+    isAboveCenter,
+    hasScrollableContent,
+    scrollToTop,
+    scrollToBottom,
+    viewportRef: scrollAreaRef,
+    _callbackRef: callbackRef,
+    _contentResizeRef: contentResizeRef as unknown as (
+      node: HTMLDivElement | null,
+    ) => void,
+  };
+};

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2022"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true
+  },
+  "include": ["src"]
+}

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/Empty.d.ts

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

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

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

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/File.js

@@ -1,42 +0,0 @@
-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];
-    const FileComponent = ()=>{
-        switch(textFileType){
-            case 'excel':
-                return /*#__PURE__*/ jsx(FileIcon, {
-                    mimeType: "excel"
-                });
-            case 'word':
-                return /*#__PURE__*/ jsx(FileIcon, {
-                    mimeType: "word"
-                });
-            case 'powerpoint':
-                return /*#__PURE__*/ jsx(FileIcon, {
-                    mimeType: "powerpoint"
-                });
-        }
-        if (lastFilePart.mediaType.includes('image/')) return /*#__PURE__*/ jsx(Image, {
-            radius: "md",
-            h: 128,
-            src: lastFilePart.url,
-            alt: "Image Preview"
-        });
-        return /*#__PURE__*/ jsx(FileIcon, {
-            mimeType: lastFilePart.mediaType
-        });
-    };
-    return textFileType || lastFilePart ? /*#__PURE__*/ jsx(Paper, {
-        radius: "md",
-        px: "md",
-        py: "sm",
-        ml: "auto",
-        bg: "var(--mantine-color-default-hover)",
-        children: /*#__PURE__*/ jsx(FileComponent, {})
-    }) : null;
-};
-export { File };

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

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

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

@@ -1,225 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-const FileIcon = ({ mimeType })=>{
-    switch(true){
-        case mimeType.includes('image/'):
-            return /*#__PURE__*/ jsxs("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "36",
-                height: "36",
-                viewBox: "0 0 36 36",
-                fill: "none",
-                stroke: "var(--mantine-color-text)",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                role: "img",
-                "aria-label": "Image",
-                children: [
-                    /*#__PURE__*/ jsx("path", {
-                        stroke: "none",
-                        d: "M0 0h24v24H0z",
-                        fill: "none"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M15 8h.01"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"
-                    })
-                ]
-            });
-        case mimeType.includes('application/pdf'):
-            return /*#__PURE__*/ jsxs("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "36",
-                height: "36",
-                viewBox: "0 0 36 36",
-                fill: "none",
-                stroke: "var(--mantine-color-text)",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                role: "img",
-                "aria-label": "FilePdf",
-                children: [
-                    /*#__PURE__*/ jsx("path", {
-                        stroke: "none",
-                        d: "M0 0h24v24H0z",
-                        fill: "none"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M14 3v4a1 1 0 0 0 1 1h4"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M17 18h2"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M20 15h-3v6"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1"
-                    })
-                ]
-            });
-        case 'word' === mimeType:
-            return /*#__PURE__*/ jsxs("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "36",
-                height: "36",
-                viewBox: "0 0 36 36",
-                fill: "none",
-                stroke: "var(--mantine-color-text)",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                role: "img",
-                "aria-label": "FileDoc",
-                children: [
-                    /*#__PURE__*/ jsx("path", {
-                        stroke: "none",
-                        d: "M0 0h24v24H0z",
-                        fill: "none"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M14 3v4a1 1 0 0 0 1 1h4"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M5 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M20 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M12.5 15a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1 -3 0v-3a1.5 1.5 0 0 1 1.5 -1.5"
-                    })
-                ]
-            });
-        case 'excel' === mimeType:
-            return /*#__PURE__*/ jsxs("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "36",
-                height: "36",
-                viewBox: "0 0 36 36",
-                fill: "none",
-                stroke: "var(--mantine-color-text)",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                role: "img",
-                "aria-label": "FileXls",
-                children: [
-                    /*#__PURE__*/ jsx("path", {
-                        stroke: "none",
-                        d: "M0 0h24v24H0z",
-                        fill: "none"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M14 3v4a1 1 0 0 0 1 1h4"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M4 15l4 6"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M4 21l4 -6"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M17 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M11 15v6h3"
-                    })
-                ]
-            });
-        case 'powerpoint' === mimeType:
-            return /*#__PURE__*/ jsxs("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "36",
-                height: "36",
-                viewBox: "0 0 36 36",
-                fill: "none",
-                stroke: "var(--mantine-color-text)",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                role: "img",
-                "aria-label": "FilePpt",
-                children: [
-                    /*#__PURE__*/ jsx("path", {
-                        stroke: "none",
-                        d: "M0 0h24v24H0z",
-                        fill: "none"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M14 3v4a1 1 0 0 0 1 1h4"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M14 3v4a1 1 0 0 0 1 1h4"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M11 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M16.5 15h3"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M18 15v6"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"
-                    })
-                ]
-            });
-        default:
-            return /*#__PURE__*/ jsxs("svg", {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "36",
-                height: "36",
-                viewBox: "0 0 36 36",
-                fill: "none",
-                stroke: "var(--mantine-color-text)",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                role: "img",
-                "aria-label": "File",
-                children: [
-                    /*#__PURE__*/ jsx("path", {
-                        stroke: "none",
-                        d: "M0 0h24v24H0z",
-                        fill: "none"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M15 3v4a1 1 0 0 0 1 1h4"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2"
-                    }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"
-                    })
-                ]
-            });
-    }
-};
-export { FileIcon };

package/dist/ai/ui/conversation/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/conversation/Loader.js

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

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/scrollArea/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 };