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

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

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { PromptInputContext } from './PromptInputContext';
+import type { PromptInputProps } from './types';
+
+export const Provider = ({
+  children,
+  onSubmit,
+  submiting,
+  uploading,
+  accept = ['text', 'image', 'pdf'],
+}: PromptInputProps) => {
+  const [text, setText] = useState('');
+  const [file, setFile] = useState<File | undefined>();
+
+  const value: PromptInputContext = {
+    text,
+    setText,
+    file,
+    setFile,
+    onSubmit: () => {
+      if (text.trim()) {
+        onSubmit({ text: text.trim(), file });
+        setText('');
+        setFile(undefined);
+      }
+    },
+    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 (
+    <PromptInputContext.Provider value={value}>
+      {children}
+    </PromptInputContext.Provider>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { Paper, type PaperProps } from '@mantine/core';
+import clsx from 'clsx';
+import { Provider } from './PromptInputProvider';
+import type { PromptInputProps } from './types';
+
+export const Root = ({
+  className,
+  onSubmit,
+  submiting,
+  uploading,
+  accept,
+  ...props
+}: PaperProps & PromptInputProps) => {
+  return (
+    <Provider
+      onSubmit={onSubmit}
+      submiting={submiting}
+      uploading={uploading}
+      accept={accept}
+    >
+      <Paper
+        radius="md"
+        withBorder
+        className={clsx('rolder-prompt-input-root', className)}
+        {...props}
+      />
+    </Provider>
+  );
+};

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

@@ -0,0 +1,39 @@
+import { ActionIcon, type ActionIconProps } from '@mantine/core';
+import { usePromptInput } from './PromptInputContext';
+
+export const Submit = ({ children, ...props }: ActionIconProps) => {
+  const Icon = (
+    <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="Submit"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M9 20v-8h-3.586a1 1 0 0 1 -.707 -1.707l6.586 -6.586a1 1 0 0 1 1.414 0l6.586 6.586a1 1 0 0 1 -.707 1.707h-3.586v8a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1" />
+    </svg>
+  );
+
+  const { onSubmit, submiting, uploading } = usePromptInput();
+
+  return (
+    <ActionIcon
+      aria-label="Submit"
+      variant="light"
+      size="lg"
+      onClick={onSubmit}
+      disabled={uploading}
+      loading={submiting}
+      {...props}
+    >
+      {children ?? Icon}
+    </ActionIcon>
+  );
+};

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

@@ -0,0 +1,39 @@
+import { Textarea as MantineTextarea, type TextareaProps } from '@mantine/core';
+import { type KeyboardEventHandler, useState } from 'react';
+import { usePromptInput } from './PromptInputContext';
+
+export const Textarea = (props: TextareaProps) => {
+  const { text, setText, onSubmit, submiting, uploading } = usePromptInput();
+  const [isComposing, setIsComposing] = useState(false);
+
+  const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
+    if (e.key === 'Enter') {
+      if (isComposing || e.nativeEvent.isComposing) {
+        return;
+      }
+      if (e.shiftKey) {
+        return;
+      }
+      e.preventDefault();
+
+      onSubmit();
+    }
+  };
+
+  return (
+    <MantineTextarea
+      w="100%"
+      size="md"
+      rows={3}
+      classNames={{ input: 'rolder-prompt-input-textarea' }}
+      placeholder="Напишите сообщение"
+      onCompositionEnd={() => setIsComposing(false)}
+      onCompositionStart={() => setIsComposing(true)}
+      onKeyDown={handleKeyDown}
+      value={text}
+      onChange={(e) => setText(e.target.value)}
+      disabled={submiting || uploading}
+      {...props}
+    />
+  );
+};

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

@@ -0,0 +1,15 @@
+import { File } from './File';
+import { Footer } from './Footer';
+import { Root } from './Root';
+import { Submit } from './Submit';
+import { Textarea } from './Textarea';
+
+export type { Accept, PromptInputProps } from './types';
+
+export const PromptInput = {
+  Root,
+  Textarea,
+  Footer,
+  Submit,
+  File,
+};

package/src/ai/ui/promptInput/types.ts

@@ -0,0 +1,9 @@
+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[];
+}

package/src/ai/utils/convertFileUIPartBlobToDataURL.ts

@@ -0,0 +1,29 @@
+import type { FileUIPart } from 'ai';
+
+/**
+ * Converts a blob URL to a data URL
+ */
+async function blobToDataURL(blobUrl: string): Promise<string> {
+  const response = await fetch(blobUrl);
+  const blob = await response.blob();
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+/**
+ * Converts FileUIPart array with blob URLs to data URLs
+ */
+export async function convertFileUIPartBlobToDataURL(
+  file: FileUIPart,
+): Promise<FileUIPart> {
+  if (file.url.startsWith('blob:')) {
+    const dataUrl = await blobToDataURL(file.url);
+    return { ...file, url: dataUrl };
+  }
+  return file;
+}

package/src/ai/utils/parseAiMessagePart.ts

@@ -0,0 +1,19 @@
+import { parsePartialJson, type TextUIPart } from 'ai';
+
+export const parseAiMessagePart = async <T extends TextUIPart>(
+  part: T,
+): Promise<T> => {
+  if (!part.text.startsWith('{')) {
+    return part;
+  }
+
+  try {
+    // parsePartialJson возвращает промис с результатом
+    // biome-ignore lint/suspicious/noExplicitAny: <parsePartialJson>
+    const result = (await parsePartialJson(part.text)) as any;
+    return result?.value || part;
+  } catch (error) {
+    console.error('Error parsing partial JSON:', error);
+    return part; // Fallback к исходному тексту
+  }
+};

package/src/app/AppDefaults.tsx

@@ -0,0 +1,21 @@
+import { useComputedColorScheme } from '@mantine/core';
+import { useEffect } from 'react';
+import { setCookies } from '../functions/setCookies';
+
+export const AppDefaults = ({
+  saveColorScheme,
+}: {
+  saveColorScheme: boolean;
+}) => {
+  const colorScheme = useComputedColorScheme();
+
+  useEffect(() => {
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const cookies = [{ name: 'tz', value: tz, expires: 365 }];
+    if (saveColorScheme)
+      cookies.push({ name: 'colorScheme', value: colorScheme, expires: 365 });
+    setCookies(cookies);
+  }, [colorScheme, saveColorScheme]);
+
+  return null;
+};

package/src/app/DefaultApp.tsx

@@ -0,0 +1,50 @@
+import {
+  ColorSchemeScript,
+  MantineProvider,
+  type MantineProviderProps,
+} from '@mantine/core';
+import { HeadContent, Scripts } from '@tanstack/react-router';
+import { getCookie } from '../functions/getCookie';
+import { AppDefaults } from './AppDefaults';
+import { cookieColorSchemeManager } from './cookieColorSchemeManager';
+import { defaultTheme } from './defaultTheme';
+
+interface Props extends MantineProviderProps {
+  saveColorScheme?: boolean;
+}
+
+const colorSchemeManager = cookieColorSchemeManager();
+
+export const DefaultApp = ({
+  children,
+  saveColorScheme = true,
+  defaultColorScheme = 'auto',
+  ...props
+}: Props) => {
+  const colorScheme = saveColorScheme
+    ? getCookie('colorScheme', defaultColorScheme)
+    : defaultColorScheme;
+
+  return (
+    <html lang="ru" suppressHydrationWarning>
+      <head>
+        <HeadContent />
+        <ColorSchemeScript defaultColorScheme={colorScheme} />
+      </head>
+      <body>
+        <MantineProvider
+          defaultColorScheme={colorScheme}
+          theme={defaultTheme}
+          colorSchemeManager={colorSchemeManager}
+          {...props}
+        >
+          <AppDefaults saveColorScheme={saveColorScheme} />
+
+          {children}
+        </MantineProvider>
+
+        <Scripts />
+      </body>
+    </html>
+  );
+};

package/src/app/cookieColorSchemeManager.ts

@@ -0,0 +1,70 @@
+import {
+  isMantineColorScheme,
+  type MantineColorScheme,
+  type MantineColorSchemeManager,
+} from '@mantine/core';
+import { atom } from 'nanostores';
+import { setCookie } from '../functions/setCookie';
+
+export interface CookieColorSchemeManager {
+  /** Название куки, `colorScheme` по умолчанию */
+  key?: string;
+}
+
+const $colorScheme = atom<MantineColorScheme | undefined>();
+let unsubscribeSystemTheme: (() => void) | undefined;
+
+export const cookieColorSchemeManager = ({
+  key = 'colorScheme',
+}: CookieColorSchemeManager = {}): MantineColorSchemeManager => {
+  return {
+    get: (defaultValue) => {
+      try {
+        return $colorScheme.get() || defaultValue;
+      } catch {
+        return defaultValue;
+      }
+    },
+
+    set: (value) => {
+      try {
+        setCookie(key, value);
+        $colorScheme.set(value);
+      } catch (error) {
+        console.warn(
+          '[cookieColorSchemeManager] Ошибка при сохранении цветовой схемы в куки.',
+          error,
+        );
+      }
+    },
+
+    subscribe: (onUpdate) => {
+      $colorScheme.listen((newValue) => {
+        if (isMantineColorScheme(newValue)) {
+          setCookie(key, newValue);
+          onUpdate(newValue);
+        }
+      });
+
+      // Listener на системную тему
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handleSystemThemeChange = () => onUpdate('auto');
+      mediaQuery.addEventListener('change', handleSystemThemeChange);
+      unsubscribeSystemTheme = () =>
+        mediaQuery.removeEventListener('change', handleSystemThemeChange);
+    },
+
+    unsubscribe: () => {
+      $colorScheme.off();
+      if (unsubscribeSystemTheme) {
+        unsubscribeSystemTheme();
+        unsubscribeSystemTheme = undefined;
+      }
+    },
+
+    clear: () => {
+      setCookie(key);
+      $colorScheme.set(undefined);
+    },
+  };
+};

package/src/app/defaultRequestMiddlewares.ts

@@ -0,0 +1,22 @@
+import { createMiddleware } from '@tanstack/react-start';
+import {
+  getCookie,
+  getRequestHeader,
+  setCookie,
+} from '@tanstack/react-start/server';
+
+const locale = createMiddleware().server(async ({ next }) => {
+  const header = getRequestHeader('accept-language');
+  const headerLocale = header?.split(',')[0] || 'ru-RU';
+  const cookieLocale = getCookie('locale');
+  const cookieTz = getCookie('tz');
+
+  const locale = cookieLocale || headerLocale;
+  const timeZone = cookieTz || 'UTC';
+
+  setCookie('locale', locale, { path: '/', maxAge: 60 * 60 * 24 * 365 });
+
+  return next({ context: { locale, timeZone } });
+});
+
+export const defaultRequestMiddlewares = [locale];

package/src/app/defaultTheme.ts

@@ -0,0 +1,22 @@
+import { createTheme, Modal } from '@mantine/core';
+
+export const defaultTheme = createTheme({
+  components: {
+    Modal: Modal.extend({
+      defaultProps: {
+        centered: true,
+        padding: 'lg',
+      },
+    }),
+    ModalTitle: Modal.Title.extend({
+      defaultProps: { pr: 24 },
+    }),
+    ModalCloseButton: Modal.CloseButton.extend({
+      defaultProps: {
+        pos: 'absolute',
+        top: 4,
+        right: 4,
+      },
+    }),
+  },
+});

package/src/functions/getCookie.ts

@@ -0,0 +1,36 @@
+import { createIsomorphicFn } from '@tanstack/react-start';
+import { getCookie as getServerCookie } from '@tanstack/react-start/server';
+import Cookies from 'js-cookie';
+
+const getCookieImpl = createIsomorphicFn()
+  .server(
+    (name: string, defaultValue?: string) =>
+      getServerCookie(name) || defaultValue,
+  )
+  .client(
+    (name: string, defaultValue?: string) => Cookies.get(name) || defaultValue,
+  );
+
+// Перегрузки функций для правильной типизации
+export function getCookie<T extends string>(name: string, defaultValue: T): T;
+export function getCookie(name: string, defaultValue: string): string;
+export function getCookie(
+  name: string,
+  defaultValue?: undefined,
+): string | undefined;
+
+/**
+ * Изоморфная функция для получения значения куки.
+ * На клиенте использует библиотеку js-cookie для работы с куками.
+ * На сервере использует функции getCookie и setCookie из tanstack start.
+ *
+ * @param {string} name - Имя куки
+ * @param {string} [defaultValue] - Значение по умолчанию. Если value указан, создается новая кука с этим значением.
+ * @returns {string | undefined} Значение куки из хранилища, либо значение по умолчанию (если кука не существует), либо undefined (если кука не существует и value не передан)
+ */
+export function getCookie(
+  name: string,
+  defaultValue?: string,
+): string | undefined {
+  return getCookieImpl(name, defaultValue);
+}

package/src/functions/setCookie.ts

@@ -0,0 +1,29 @@
+import { createIsomorphicFn } from '@tanstack/react-start';
+import {
+  deleteCookie,
+  setCookie as setServerCookie,
+} from '@tanstack/react-start/server';
+import Cookies from 'js-cookie';
+
+/**
+ * Изоморфная функция для установки значения куки.
+ * На клиенте использует библиотеку js-cookie для работы с куками.
+ * На сервере использует функции getCookie и setCookie из tanstack start.
+ *
+ * @param {string} name - Имя куки
+ * @param {string} value - Значение куки, если не указано, кука будет удалена
+ * @param {number} [expires=7] - Количество дней до истечения срока действия куки (по умолчанию 7 дней)
+ */
+export const setCookie = createIsomorphicFn()
+  .server((name: string, value?: string, expires?: number) => {
+    const expiresDate = new Date();
+    expiresDate.setDate(expiresDate.getDate() + (expires || 7));
+    if (value) setServerCookie(name, value, { expires: expiresDate });
+    else deleteCookie(name);
+  })
+  .client((name: string, value?: string, expires?: number) => {
+    const expiresDate = new Date();
+    expiresDate.setDate(expiresDate.getDate() + (expires || 7));
+    if (value) Cookies.set(name, value, { expires: expiresDate });
+    else Cookies.remove(name);
+  });

package/src/functions/setCookies.ts

@@ -0,0 +1,24 @@
+import { createClientOnlyFn } from '@tanstack/react-start';
+import Cookies from 'js-cookie';
+
+interface Cookie {
+  name: string;
+  value?: string;
+  expires?: number;
+}
+
+/**
+ * Клиентская функция для установки значения нескольких куки.
+ * На клиенте использует библиотеку js-cookie для работы с куками.
+ * На сервере использует функции getCookie и setCookie из tanstack start.
+ *
+ * @param {Cookie[]} cookies - Массив объектов с данными куки *
+ */
+export const setCookies = createClientOnlyFn((cookies: Cookie[]) => {
+  cookies.forEach(({ name, value, expires }) => {
+    const expiresDate = new Date();
+    expiresDate.setDate(expiresDate.getDate() + (expires || 7));
+    if (value) Cookies.set(name, value, { expires: expiresDate });
+    else Cookies.remove(name);
+  });
+});

package/src/hooks/useMutation.ts

@@ -0,0 +1,14 @@
+import {
+  useMutation as tanstackUseMutation,
+  type UseMutationOptions,
+} from '@tanstack/react-query';
+
+export const useMutation = <T, K = void>(
+  fn: ({ data }: { data: T }) => Promise<K>,
+  options?: Omit<UseMutationOptions<K, Error, T>, 'mutationFn'>,
+) => {
+  return tanstackUseMutation<K, Error, T>({
+    mutationFn: (data) => fn({ data }),
+    ...options,
+  });
+};

package/src/hooks/useMutationWithInvalidate.ts

@@ -0,0 +1,23 @@
+import {
+  type UseMutationOptions,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query';
+
+export const useMutationWithInvalidate = <T, K = void>(
+  fn: ({ data }: { data: T }) => Promise<K>,
+  queryKey: string[],
+  options?: Omit<UseMutationOptions<K, Error, T>, 'mutationFn' | 'onSettled'>,
+) => {
+  const queryClient = useQueryClient();
+  return useMutation<K, Error, T>({
+    mutationFn: (data) => fn({ data }),
+    // Здесь важно ждать invalidateQueries, чтобы mutateAsync завершался по результату
+    // не только мутации, но и загрузки новых данных
+    onSettled: async (_, error) => {
+      if (!error && queryKey.length)
+        await queryClient.invalidateQueries({ queryKey });
+    },
+    ...options,
+  });
+};

package/{dist/index.d.ts → src/index.ts}

@@ -1,26 +1,66 @@
 /** biome-ignore-all assist/source/organizeImports: <> */
-export { Conversation, type ConversationProps, useChatMessage, } from './ai/ui/conversation';
-export { type Accept, PromptInput, type PromptInputProps, } from './ai/ui/promptInput';
+
+//* AI *//
+export {
+  Conversation,
+  type ConversationProps,
+  useChatMessage,
+} from './ai/ui/conversation';
+export {
+  type Accept,
+  PromptInput,
+  type PromptInputProps,
+} from './ai/ui/promptInput';
 export { convertFileUIPartBlobToDataURL } from './ai/utils/convertFileUIPartBlobToDataURL';
 export { parseAiMessagePart } from './ai/utils/parseAiMessagePart';
+
+//* APP *//
 export { DefaultApp } from './app/DefaultApp';
 export { defaultRequestMiddlewares } from './app/defaultRequestMiddlewares';
 export { defaultTheme } from './app/defaultTheme';
+
+//* FUNCTIONS *//
 export { getCookie } from './functions/getCookie';
 export { setCookie } from './functions/setCookie';
 export { setCookies } from './functions/setCookies';
+
+//* HOOKS *//
 export { useMutation } from './hooks/useMutation';
 export { useMutationWithInvalidate } from './hooks/useMutationWithInvalidate';
+
+//* SURREAL *//
 export { getDB } from './surreal/connection';
 export { surrealDeleteFn, surrealUnsubscribeFn } from './surreal/deafaultCrud';
 export { deserialize } from './surreal/deserialize';
 export { encryptionFn } from './surreal/encryption';
+
+//* UI *//
 export { Editor, useEditor } from './ui/editor';
-export { DefaultError, DefaultNotFound, defaultErrorNotification, Forbidden, } from './ui/error';
+export {
+  DefaultError,
+  DefaultNotFound,
+  defaultErrorNotification,
+  Forbidden,
+} from './ui/error';
 export { AnimatedChevron } from './ui/AnimatedChevron';
-export { useAppForm, useFieldContext, withForm, blurOnError, fieldsSchema, } from './ui/form';
+export {
+  useAppForm,
+  useFieldContext,
+  withForm,
+  blurOnError,
+  fieldsSchema,
+} from './ui/form';
 export { HoverPaper, usePaperHover } from './ui/hoverPaper';
 export { JsonInput } from './ui/JsonInput';
 export { RouterLink } from './ui/RouterLink';
 export { SaveInput } from './ui/saveInput';
-export { ScrollArea, useScrollArea, type ScrollAreaContextValue, type ScrollAreaHook, type ScrollAreaProps, type ScrollAreaState, type ScrollButtonProps, type ScrollPosition, } from './ui/scrollArea';
+export {
+  ScrollArea,
+  useScrollArea,
+  type ScrollAreaContextValue,
+  type ScrollAreaHook,
+  type ScrollAreaProps,
+  type ScrollAreaState,
+  type ScrollButtonProps,
+  type ScrollPosition,
+} from './ui/scrollArea';