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

package/dist/ui/scrollArea/useScrollArea.js

@@ -0,0 +1,146 @@
+import { useDebouncedCallback, useMergedRef, useResizeObserver } from "@mantine/hooks";
+import { useCallback, useEffect, useRef, useState } from "react";
+const useScrollAreaState = (options = {})=>{
+    const { autoScroll = false, scrollToBottomOnInit = false, animated = true, nearThreshold = 32 } = options;
+    const scrollAreaRef = useRef(null);
+    const isUserInteractingRef = useRef(false);
+    const userInteractionTimeoutRef = useRef(void 0);
+    const isInitializedRef = useRef(false);
+    const [contentResizeRef, contentRect] = useResizeObserver();
+    const [scrollPosition, setScrollPosition] = useState({
+        scrollTop: 0,
+        clientHeight: 0,
+        scrollHeight: 0
+    });
+    const isAtTop = 0 === scrollPosition.scrollTop;
+    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;
+    const debouncedUpdatePosition = useDebouncedCallback((element)=>{
+        const newPosition = {
+            scrollTop: element.scrollTop,
+            clientHeight: element.clientHeight,
+            scrollHeight: element.scrollHeight
+        };
+        setScrollPosition(newPosition);
+    }, {
+        delay: 16
+    });
+    const scrollToTop = useCallback((isAnimated)=>{
+        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)=>{
+        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;
+        const scrollHeightBefore = element.scrollHeight;
+        setTimeout(()=>{
+            const scrollHeightAfter = element.scrollHeight;
+            const diff = element.scrollHeight - (element.scrollTop + element.clientHeight);
+            if (diff > 1 && scrollHeightAfter !== scrollHeightBefore) element.scrollTop = element.scrollHeight;
+        }, 50);
+    }, [
+        animated
+    ]);
+    const performAutoScroll = useCallback(()=>{
+        if (!autoScroll || isUserInteractingRef.current || !scrollAreaRef.current) return;
+        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)=>{
+        const element = event.target;
+        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 || 0 === contentRect.height) 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'
+        ];
+        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
+    ]);
+    const callbackRef = useMergedRef(scrollAreaRef);
+    return {
+        isAtTop,
+        isNearTop,
+        isAtBottom,
+        isNearBottom,
+        isAboveCenter,
+        hasScrollableContent,
+        scrollToTop,
+        scrollToBottom,
+        viewportRef: scrollAreaRef,
+        _callbackRef: callbackRef,
+        _contentResizeRef: contentResizeRef
+    };
+};
+export { useScrollAreaState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolder/kit",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.0-alpha.9",
   "type": "module",
   "exports": {
     ".": {
@@ -12,6 +12,9 @@
   "sideEffects": [
     "*.css"
   ],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "rslib build",
     "dev": "rslib build --watch",

package/rslib.config.ts

@@ -1,21 +0,0 @@
-import { pluginReact } from '@rsbuild/plugin-react';
-import { defineConfig } from '@rslib/core';
-
-export default defineConfig({
-  source: {
-    entry: {
-      index: ['./src/**/*.{ts,tsx,js,jsx,css}'],
-    },
-  },
-  lib: [
-    {
-      bundle: false,
-      dts: true,
-      format: 'esm',
-    },
-  ],
-  output: {
-    target: 'web',
-  },
-  plugins: [pluginReact()],
-});

package/src/ai/ui/conversation/ConversationContext.ts

@@ -1,21 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export interface ConversationContext {
-  loading: boolean;
-  streaming: boolean;
-  empty: boolean;
-}
-
-export const ConversationContext = createContext<ConversationContext | null>(
-  null,
-);
-
-export const useConversation = () => {
-  const context = useContext(ConversationContext);
-  if (!context) {
-    throw new Error(
-      'useConversation must be used within a ConversationProvider',
-    );
-  }
-  return context;
-};

package/src/ai/ui/conversation/ConversationProvider.tsx

@@ -1,21 +0,0 @@
-import { ConversationContext } from './ConversationContext';
-import type { ConversationProps } from './types';
-
-export const Provider = ({
-  children,
-  loading,
-  streaming,
-  empty,
-}: ConversationProps) => {
-  const value: ConversationContext = {
-    loading,
-    streaming,
-    empty,
-  };
-
-  return (
-    <ConversationContext.Provider value={value}>
-      {children}
-    </ConversationContext.Provider>
-  );
-};

package/src/ai/ui/conversation/Empty.tsx

@@ -1,15 +0,0 @@
-import { Stack, Text } from '@mantine/core';
-import { useConversation } from './ConversationContext';
-
-export const Empty = () => {
-  const { empty } = useConversation();
-
-  return !empty ? (
-    <Stack align="center" gap={0}>
-      <Text>Нет сообщений</Text>
-      <Text size="sm" c="dimmed">
-        Начните общение, чтобы увидеть сообщения здесь
-      </Text>
-    </Stack>
-  ) : null;
-};

package/src/ai/ui/conversation/File.tsx

@@ -1,40 +0,0 @@
-import { Image, Paper } from '@mantine/core';
-import type { UIMessage } from 'ai';
-import { FileIcon } from './FileIcon';
-
-export const File = <T extends UIMessage>({ message }: { message: T }) => {
-  const textFileType = message.id.split('-')[1];
-
-  const fileParts = message.parts?.filter((i) => i.type === 'file');
-  const lastFilePart = fileParts[fileParts.length - 1];
-
-  const FileComponent = () => {
-    switch (textFileType) {
-      case 'excel':
-        return <FileIcon mimeType="excel" />;
-      case 'word':
-        return <FileIcon mimeType="word" />;
-      case 'powerpoint':
-        return <FileIcon mimeType="powerpoint" />;
-    }
-
-    if (lastFilePart.mediaType.includes('image/'))
-      return (
-        <Image radius="md" h={128} src={lastFilePart.url} alt="Image Preview" />
-      );
-
-    return <FileIcon mimeType={lastFilePart.mediaType} />;
-  };
-
-  return textFileType || lastFilePart ? (
-    <Paper
-      radius="md"
-      px="md"
-      py="sm"
-      ml="auto"
-      bg="var(--mantine-color-default-hover)"
-    >
-      <FileComponent />
-    </Paper>
-  ) : null;
-};

package/src/ai/ui/conversation/FileIcon.tsx

@@ -1,143 +0,0 @@
-export const FileIcon = ({ mimeType }: { mimeType: string }) => {
-  switch (true) {
-    case mimeType.includes('image/'):
-      return (
-        <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"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path d="M15 8h.01" />
-          <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" />
-          <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" />
-          <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
-        </svg>
-      );
-    case mimeType.includes('application/pdf'):
-      return (
-        <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"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
-          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
-          <path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" />
-          <path d="M17 18h2" />
-          <path d="M20 15h-3v6" />
-          <path d="M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1" />
-        </svg>
-      );
-    case mimeType === 'word':
-      return (
-        <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"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
-          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
-          <path d="M5 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1" />
-          <path d="M20 16.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0" />
-          <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" />
-        </svg>
-      );
-    case mimeType === 'excel':
-      return (
-        <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"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
-          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
-          <path d="M4 15l4 6" />
-          <path d="M4 21l4 -6" />
-          <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" />
-          <path d="M11 15v6h3" />
-        </svg>
-      );
-    case mimeType === 'powerpoint':
-      return (
-        <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"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
-          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
-          <path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" />
-          <path d="M11 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" />
-          <path d="M16.5 15h3" />
-          <path d="M18 15v6" />
-          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
-        </svg>
-      );
-    default:
-      return (
-        <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"
-        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path d="M15 3v4a1 1 0 0 0 1 1h4" />
-          <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" />
-          <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
-        </svg>
-      );
-  }
-};

package/src/ai/ui/conversation/Loader.tsx

@@ -1,8 +0,0 @@
-import { type LoaderProps, Loader as MantineLoader } from '@mantine/core';
-import { useConversation } from './ConversationContext';
-
-export const Loader = (props: LoaderProps) => {
-  const { loading } = useConversation();
-
-  return loading ? <MantineLoader size={28} type="dots" {...props} /> : null;
-};

package/src/ai/ui/conversation/Message.tsx

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

package/src/ai/ui/conversation/Root.tsx

@@ -1,24 +0,0 @@
-import { Paper, Stack } from '@mantine/core';
-import { ScrollArea } from '../../../ui/scrollArea';
-import { Provider } from './ConversationProvider';
-import type { ConversationProps } from './types';
-
-export const Root = ({
-  children,
-  loading,
-  streaming,
-  empty,
-  ...props
-}: ConversationProps) => {
-  return (
-    <Provider loading={loading} streaming={streaming} empty={empty}>
-      <Paper withBorder radius="md" {...props}>
-        <ScrollArea autoScroll scrollToBottomOnInit p="md">
-          <Stack>{children}</Stack>
-
-          <ScrollArea.ScrollButton />
-        </ScrollArea>
-      </Paper>
-    </Provider>
-  );
-};

package/src/ai/ui/conversation/index.ts

@@ -1,16 +0,0 @@
-import { Empty } from './Empty';
-import { File } from './File';
-import { Loader } from './Loader';
-import { Message } from './Message';
-import { Root } from './Root';
-
-export type { ConversationProps } from './types';
-export { useChatMessage } from './useChatMessage';
-
-export const Conversation = {
-  Root,
-  Message,
-  File,
-  Loader,
-  Empty,
-};

package/src/ai/ui/conversation/useChatMessage.ts

@@ -1,13 +0,0 @@
-import type { TextUIPart } from 'ai';
-import { useEffect, useState } from 'react';
-import { parseAiMessagePart } from '../../utils/parseAiMessagePart';
-
-export const useChatMessage = (part: TextUIPart) => {
-  const [parsedText, setParsedText] = useState('');
-
-  useEffect(() => {
-    parseAiMessagePart(part).then((i) => setParsedText(i.text));
-  }, [part]);
-
-  return parsedText;
-};

package/src/ai/ui/promptInput/File.tsx

@@ -1,98 +0,0 @@
-import {
-  ActionIcon,
-  FileButton,
-  type FileButtonProps,
-  Tooltip,
-} from '@mantine/core';
-import { useRef } from 'react';
-import { FileIcon } from './FileIcon';
-import { usePromptInput } from './PromptInputContext';
-
-export const File = (props: Omit<FileButtonProps, 'onChange' | 'children'>) => {
-  const resetRef = useRef<() => void>(null);
-  const { file, setFile, accept, submiting, uploading } = usePromptInput();
-
-  return (
-    <FileButton
-      resetRef={resetRef}
-      onChange={async (file) => {
-        // Проверка для сценария отмены в системном диалоговом окне
-        if (file) setFile(file);
-      }}
-      accept={accept}
-      disabled={submiting || uploading}
-      {...props}
-    >
-      {(props) => (
-        <ActionIcon.Group>
-          <ActionIcon
-            size="lg"
-            variant="default"
-            disabled={submiting}
-            loading={uploading}
-            classNames={{ root: 'rolder-prompt-input-file-action-action' }}
-            {...props}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              role="img"
-              aria-label="Paperclip"
-            >
-              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-              <path d="M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5" />
-            </svg>
-          </ActionIcon>
-
-          {file && (
-            <>
-              <Tooltip label={file.name} openDelay={500}>
-                <ActionIcon.GroupSection variant="default" size="lg">
-                  <FileIcon mimeType={file.type} />
-                </ActionIcon.GroupSection>
-              </Tooltip>
-
-              <ActionIcon
-                size="lg"
-                variant="default"
-                classNames={{ root: 'rolder-prompt-input-file-action-action' }}
-                onClick={() => {
-                  resetRef.current?.();
-                  setFile(undefined);
-                }}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  role="img"
-                  aria-label="Trash"
-                >
-                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                  <path d="M4 7l16 0" />
-                  <path d="M10 11l0 6" />
-                  <path d="M14 11l0 6" />
-                  <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
-                  <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
-                </svg>
-              </ActionIcon>
-            </>
-          )}
-        </ActionIcon.Group>
-      )}
-    </FileButton>
-  );
-};