@gravity-ui/aikit 1.0.2 → 1.2.0

package/README.md

@@ -1,10 +1,20 @@
-# @gravity-ui/aikit
+# AIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/aikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/aikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/aikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/aikit/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/aikit/?path=/docs/pages-chatcontainer--docs)
 
-[![npm package](https://img.shields.io/npm/v/@gravity-ui/aikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/aikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/aikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/aikit/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/aikit/?path=/docs/pages-chatcontainer--docs)
+UI component library for AI chats built with Atomic Design principles.
 
----
+<!--GITHUB_BLOCK-->
 
-UI component library for AI chats built with Atomic Design principles.
+![Cover image](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/aikit_cover.png)
+
+## Resources
+
+### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Website](https://gravity-ui.com/libraries/aikit)
+
+### ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/aikit/)
+
+### ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Community](https://t.me/gravity_ui)
+
+<!--/GITHUB_BLOCK-->
 
 ## Description
 

package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.d.ts

@@ -1,4 +1,3 @@
-import '@diplodoc/transform/dist/js/yfm';
 import { OptionsType } from '@diplodoc/transform/lib/typings';
 import './MarkdownRenderer.scss';
 export interface MarkdownRendererProps {
@@ -6,5 +5,8 @@ export interface MarkdownRendererProps {
     className?: string;
     qa?: string;
     transformOptions?: OptionsType;
+    shouldParseIncompleteMarkdown?: boolean;
 }
-export declare function MarkdownRenderer({ content, className, qa, transformOptions, }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element;
+declare function MarkdownRendererComponent({ content, className, qa, transformOptions, shouldParseIncompleteMarkdown, }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare const MarkdownRenderer: import("react").MemoExoticComponent<typeof MarkdownRendererComponent>;
+export {};

package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.js

@@ -1,24 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import transform from '@diplodoc/transform';
-import '@diplodoc/transform/dist/js/yfm';
+import { memo } from 'react';
+import { useMarkdownTransform } from '../../../hooks/useMarkdownTransform';
+import { useRemend } from '../../../hooks/useRemend';
 import { block } from '../../../utils/cn';
+import { areOptionsEqual } from '../../../utils/markdownUtils';
 import './MarkdownRenderer.scss';
 const b = block('markdown-renderer');
-export function MarkdownRenderer({ content, className, qa, transformOptions, }) {
-    const html = useMemo(() => {
-        if (typeof content !== 'string') {
-            return '';
-        }
-        try {
-            const result = transform(content, transformOptions);
-            return result.result.html;
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.error('Error transforming markdown:', error);
-            return '';
-        }
-    }, [content, transformOptions]);
+function MarkdownRendererComponent({ content, className, qa, transformOptions, shouldParseIncompleteMarkdown = false, }) {
+    const closedContent = useRemend(content, shouldParseIncompleteMarkdown);
+    const html = useMarkdownTransform(closedContent, transformOptions);
     return (_jsx("div", { className: b(null, [className, 'yfm']), "data-qa": qa, dangerouslySetInnerHTML: { __html: html } }));
 }
+export const MarkdownRenderer = memo(MarkdownRendererComponent, (prevProps, nextProps) => {
+    if (prevProps.content !== nextProps.content) {
+        return false;
+    }
+    if (prevProps.shouldParseIncompleteMarkdown !== nextProps.shouldParseIncompleteMarkdown) {
+        return false;
+    }
+    if (prevProps.className !== nextProps.className) {
+        return false;
+    }
+    if (prevProps.qa !== nextProps.qa) {
+        return false;
+    }
+    return areOptionsEqual(prevProps.transformOptions, nextProps.transformOptions);
+});
+MarkdownRenderer.displayName = 'MarkdownRenderer';

package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.scss

@@ -6,4 +6,5 @@ $block: '.#{variables.$ns}markdown-renderer';
 
 #{$block} {
     max-width: 100%;
+    color: var(--g-color-text-primary);
 }

package/dist/components/atoms/MarkdownRenderer/__stories__/MarkdownRenderer.stories.d.ts

@@ -1,6 +1,7 @@
-import { Meta, StoryFn } from '@storybook/react-webpack5';
-import { MarkdownRendererProps } from '..';
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { MarkdownRenderer, MarkdownRendererProps } from '..';
 declare const _default: Meta;
 export default _default;
 export declare const Playground: StoryFn<MarkdownRendererProps>;
 export declare const WithTransformOptions: StoryFn<MarkdownRendererProps>;
+export declare const WithParsingIncompleteMarkdown: StoryObj<typeof MarkdownRenderer>;

package/dist/components/atoms/MarkdownRenderer/__stories__/MarkdownRenderer.stories.js

@@ -1,5 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { MarkdownRenderer } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
 import MDXDocs from './Docs.mdx';
 export default {
     title: 'atoms/MarkdownRenderer',
@@ -24,6 +28,9 @@ export default {
         },
     },
 };
+const defaultDecorators = [
+    (Story) => (_jsx(Showcase, { children: _jsx(Story, {}) })),
+];
 export const Playground = (args) => _jsx(MarkdownRenderer, Object.assign({}, args));
 Playground.args = {
     content: '# Hello World\n\nThis is **bold** text and this is *italic* text.',
@@ -47,3 +54,46 @@ export const WithTransformOptions = () => {
     const content = `# Custom Plugin Example\n\nThis is **bold text** with custom styling applied via plugin.`;
     return _jsx(MarkdownRenderer, { content: content, transformOptions: transformOptions });
 };
+const STREAMING_CONTENT = `**This is a very long bold text that keeps going and going without a clear end, so you can see how unterminated bold blocks are handled by the renderer.**
+
+*Here is an equally lengthy italicized sentence that stretches on and on, never quite reaching a conclusion, so you can observe how unterminated italic blocks behave in a streaming Markdown context, particularly when the content is verbose.*
+
+\`This is a long inline code block that should be unterminated and continues for quite a while, including some code-like content such as const foo = "bar"; and more, to see how the parser deals with it when the code block is not properly closed\`
+
+[This is a very long link text that is unterminated and keeps going to show how unterminated links are rendered in the preview, especially when the link text is verbose and the URL is missing or incomplete](https://gravity-ui.com/ru/libraries/aikit)`;
+function StreamingMarkdownComparison() {
+    const tokens = useMemo(() => STREAMING_CONTENT.split(''), []);
+    const [content, setContent] = useState('');
+    const intervalRef = useRef(null);
+    useEffect(() => {
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+        setContent('');
+        let currentContent = '';
+        let index = 0;
+        intervalRef.current = setInterval(() => {
+            if (index < tokens.length) {
+                currentContent += tokens[index];
+                setContent(currentContent);
+                index += 1;
+            }
+            if (index >= tokens.length && intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        }, 15);
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, [tokens]);
+    return (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Without shouldParseIncompleteMarkdown (default)", children: _jsx(ContentWrapper, { width: "400px", children: _jsx(MarkdownRenderer, { content: content, shouldParseIncompleteMarkdown: false }) }) }), _jsx(ShowcaseItem, { title: "With shouldParseIncompleteMarkdown", children: _jsx(ContentWrapper, { width: "400px", children: _jsx(MarkdownRenderer, { content: content, shouldParseIncompleteMarkdown: true }) }) })] }));
+}
+export const WithParsingIncompleteMarkdown = {
+    render: () => _jsx(StreamingMarkdownComparison, {}),
+    decorators: defaultDecorators,
+};

package/dist/components/organisms/AssistantMessage/AssistantMessage.d.ts

@@ -7,8 +7,9 @@ type AssistantMessagePick<TContent extends TMessageContent> = Pick<TAssistantMes
 export type AssistantMessageProps<TContent extends TMessageContent = never> = BaseMessagePick & AssistantMessagePick<TContent> & {
     messageRendererRegistry?: MessageRendererRegistry;
     transformOptions?: OptionsType;
+    shouldParseIncompleteMarkdown?: boolean;
     className?: string;
     qa?: string;
 };
-export declare function AssistantMessage<TContent extends TMessageContent = never>({ content, actions, timestamp, id, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, className, qa, }: AssistantMessageProps<TContent>): import("react/jsx-runtime").JSX.Element | null;
+export declare function AssistantMessage<TContent extends TMessageContent = never>({ content, actions, timestamp, id, messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown, showActionsOnHover, showTimestamp, className, qa, }: AssistantMessageProps<TContent>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/organisms/AssistantMessage/AssistantMessage.js

@@ -7,14 +7,14 @@ import { BaseMessage } from '../../molecules/BaseMessage';
 import { createDefaultMessageRegistry } from './defaultMessageTypeRegistry';
 import './AssistantMessage.scss';
 const b = block('assistant-message');
-export function AssistantMessage({ content, actions, timestamp, id, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, className, qa, }) {
+export function AssistantMessage({ content, actions, timestamp, id, messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown, showActionsOnHover, showTimestamp, className, qa, }) {
     const registry = useMemo(() => {
-        const defaultRegistry = createDefaultMessageRegistry(transformOptions);
+        const defaultRegistry = createDefaultMessageRegistry(transformOptions, shouldParseIncompleteMarkdown);
         if (messageRendererRegistry) {
             return mergeMessageRendererRegistries(defaultRegistry, messageRendererRegistry);
         }
         return defaultRegistry;
-    }, [messageRendererRegistry, transformOptions]);
+    }, [messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown]);
     const parts = normalizeContent(content);
     if (parts.length === 0) {
         return null;

package/dist/components/organisms/AssistantMessage/defaultMessageTypeRegistry.d.ts

@@ -1,3 +1,3 @@
 import type { OptionsType } from '@diplodoc/transform/lib/typings';
 import { type MessageRendererRegistry } from '../../../utils/messageTypeRegistry';
-export declare function createDefaultMessageRegistry(transformOptions?: OptionsType): MessageRendererRegistry;
+export declare function createDefaultMessageRegistry(transformOptions?: OptionsType, shouldParseIncompleteMarkdown?: boolean): MessageRendererRegistry;

package/dist/components/organisms/AssistantMessage/defaultMessageTypeRegistry.js

@@ -3,10 +3,10 @@ import { createMessageRendererRegistry, registerMessageRenderer, } from '../../.
 import { MarkdownRenderer } from '../../atoms/MarkdownRenderer';
 import { ThinkingMessage } from '../ThinkingMessage';
 import { ToolMessage } from '../ToolMessage';
-export function createDefaultMessageRegistry(transformOptions) {
+export function createDefaultMessageRegistry(transformOptions, shouldParseIncompleteMarkdown) {
     const registry = createMessageRendererRegistry();
     registerMessageRenderer(registry, 'text', {
-        component: ({ part }) => (_jsx(MarkdownRenderer, { content: part.data.text, transformOptions: transformOptions })),
+        component: ({ part }) => (_jsx(MarkdownRenderer, { content: part.data.text, transformOptions: transformOptions, shouldParseIncompleteMarkdown: shouldParseIncompleteMarkdown })),
     });
     registerMessageRenderer(registry, 'tool', {
         component: ({ part }) => _jsx(ToolMessage, Object.assign({}, part.data)),

package/dist/components/organisms/MessageList/MessageList.d.ts

@@ -12,6 +12,7 @@ export type MessageListProps<TContent extends TMessageContent = never> = {
     onRetry?: () => void;
     messageRendererRegistry?: MessageRendererRegistry;
     transformOptions?: OptionsType;
+    shouldParseIncompleteMarkdown?: boolean;
     showActionsOnHover?: boolean;
     showTimestamp?: boolean;
     showAvatar?: boolean;
@@ -24,4 +25,4 @@ export type MessageListProps<TContent extends TMessageContent = never> = {
     hasPreviousMessages?: boolean;
     onLoadPreviousMessages?: () => void;
 };
-export declare function MessageList<TContent extends TMessageContent = never>({ messages, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, loaderStatuses, className, qa, status, errorMessage, onRetry, hasPreviousMessages, onLoadPreviousMessages, }: MessageListProps<TContent>): import("react/jsx-runtime").JSX.Element;
+export declare function MessageList<TContent extends TMessageContent = never>({ messages, messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, loaderStatuses, className, qa, status, errorMessage, onRetry, hasPreviousMessages, onLoadPreviousMessages, }: MessageListProps<TContent>): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/MessageList/MessageList.js

@@ -9,7 +9,7 @@ import { UserMessage } from '../UserMessage';
 import { ErrorAlert } from './ErrorAlert';
 import './MessageList.scss';
 const b = block('message-list');
-export function MessageList({ messages, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, loaderStatuses = ['submitted'], className, qa, status, errorMessage, onRetry, hasPreviousMessages = false, onLoadPreviousMessages, }) {
+export function MessageList({ messages, messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, loaderStatuses = ['submitted'], className, qa, status, errorMessage, onRetry, hasPreviousMessages = false, onLoadPreviousMessages, }) {
     const isStreaming = status === 'streaming';
     const isSubmitted = status === 'submitted';
     const showLoader = status && loaderStatuses.includes(status);
@@ -23,7 +23,7 @@ export function MessageList({ messages, messageRendererRegistry, transformOption
     const renderMessage = (message, index) => {
         if (isUserMessage(message)) {
             const actions = resolveMessageActions(message, userActions);
-            return (_jsx(UserMessage, { content: message.content, actions: actions, timestamp: message.timestamp, format: message.format, avatarUrl: message.avatarUrl, transformOptions: transformOptions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, showAvatar: showAvatar }, message.id || `message-${index}`));
+            return (_jsx(UserMessage, { content: message.content, actions: actions, timestamp: message.timestamp, format: message.format, avatarUrl: message.avatarUrl, transformOptions: transformOptions, shouldParseIncompleteMarkdown: shouldParseIncompleteMarkdown, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, showAvatar: showAvatar }, message.id || `message-${index}`));
         }
         if (isAssistantMessage(message)) {
             const isLastMessage = index === messages.length - 1;
@@ -32,7 +32,7 @@ export function MessageList({ messages, messageRendererRegistry, transformOption
             const actions = showActions
                 ? resolveMessageActions(message, assistantActions)
                 : undefined;
-            return (_jsx(AssistantMessage, { content: message.content, actions: actions, timestamp: message.timestamp, id: message.id, messageRendererRegistry: messageRendererRegistry, transformOptions: transformOptions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp }, message.id || `message-${index}`));
+            return (_jsx(AssistantMessage, { content: message.content, actions: actions, timestamp: message.timestamp, id: message.id, messageRendererRegistry: messageRendererRegistry, transformOptions: transformOptions, shouldParseIncompleteMarkdown: shouldParseIncompleteMarkdown, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp }, message.id || `message-${index}`));
         }
         return null;
     };

package/dist/components/organisms/UserMessage/index.d.ts

@@ -7,6 +7,7 @@ export type UserMessageProps = Pick<BaseMessageProps, 'actions' | 'showActionsOn
     showAvatar?: boolean;
     avatarUrl?: string;
     transformOptions?: OptionsType;
+    shouldParseIncompleteMarkdown?: boolean;
     className?: string;
     qa?: string;
 };

package/dist/components/organisms/UserMessage/index.js

@@ -7,6 +7,6 @@ import { BaseMessage } from '../../molecules/BaseMessage';
 import './UserMessage.scss';
 const b = block('user-message');
 export const UserMessage = (props) => {
-    const { className, qa, content, actions, showActionsOnHover, showAvatar, avatarUrl = '', timestamp = '', showTimestamp, format = 'plain', transformOptions, } = props;
-    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [showAvatar ? _jsx(Avatar, { imgUrl: avatarUrl, size: "s", view: "filled" }) : null, _jsx(BaseMessage, { role: "user", actions: actions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, timestamp: timestamp, children: _jsx(MessageBalloon, { className: modsClassName(b({ format })), children: format === 'markdown' ? (_jsx(MarkdownRenderer, { content: content, transformOptions: transformOptions })) : (content) }) })] }));
+    const { className, qa, content, actions, showActionsOnHover, showAvatar, avatarUrl = '', timestamp = '', showTimestamp, format = 'plain', transformOptions, shouldParseIncompleteMarkdown, } = props;
+    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [showAvatar ? _jsx(Avatar, { imgUrl: avatarUrl, size: "s", view: "filled" }) : null, _jsx(BaseMessage, { role: "user", actions: actions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, timestamp: timestamp, children: _jsx(MessageBalloon, { className: modsClassName(b({ format })), children: format === 'markdown' ? (_jsx(MarkdownRenderer, { content: content, transformOptions: transformOptions, shouldParseIncompleteMarkdown: shouldParseIncompleteMarkdown })) : (content) }) })] }));
 };

package/dist/components/pages/ChatContainer/ChatContainer.js

@@ -19,7 +19,7 @@ const b = block('chat-container');
  */
 export function ChatContainer(props) {
     var _a, _b;
-    const { chats = [], messages = [], onSendMessage, onDeleteChat, onCancel, onRetry, status = 'ready', error = null, showActionsOnHover = false, contextItems = [], transformOptions, messageListConfig, headerProps = {}, contentProps = {}, emptyContainerProps = {}, promptInputProps = {}, disclaimerProps = {}, historyProps = {}, welcomeConfig, i18nConfig = {}, hideTitleOnEmptyChat = false, className, headerClassName, contentClassName, footerClassName, qa, } = props;
+    const { chats = [], messages = [], onSendMessage, onDeleteChat, onCancel, onRetry, status = 'ready', error = null, showActionsOnHover = false, contextItems = [], transformOptions, shouldParseIncompleteMarkdown, messageListConfig, headerProps = {}, contentProps = {}, emptyContainerProps = {}, promptInputProps = {}, disclaimerProps = {}, historyProps = {}, welcomeConfig, i18nConfig = {}, hideTitleOnEmptyChat = false, className, headerClassName, contentClassName, footerClassName, qa, } = props;
     const hookState = useChatContainer(props);
     // Collect i18n texts with overrides
     const headerTitle = useMemo(() => {
@@ -69,7 +69,17 @@ export function ChatContainer(props) {
     const messageListProps = useMemo(() => (Object.assign(Object.assign({}, messageListConfig), { messages,
         status, errorMessage: (messageListConfig === null || messageListConfig === void 0 ? void 0 : messageListConfig.errorMessage) || (error ? { text: error.message } : undefined), onRetry,
         showActionsOnHover,
-        transformOptions })), [messages, status, error, onRetry, showActionsOnHover, transformOptions, messageListConfig]);
+        transformOptions,
+        shouldParseIncompleteMarkdown })), [
+        messages,
+        status,
+        error,
+        onRetry,
+        showActionsOnHover,
+        transformOptions,
+        shouldParseIncompleteMarkdown,
+        messageListConfig,
+    ]);
     // Build props for PromptInput
     const finalPromptInputProps = useMemo(() => {
         var _a, _b, _c, _d;

package/dist/components/pages/ChatContainer/types.d.ts

@@ -127,6 +127,8 @@ export interface ChatContainerProps {
     contextItems?: ContextItemConfig[];
     /** Transform options for markdown rendering */
     transformOptions?: OptionsType;
+    /** Should parse incomplete markdown (e.g., during streaming) */
+    shouldParseIncompleteMarkdown?: boolean;
     /** MessageList configuration for actions and loader behavior */
     messageListConfig?: MessageListConfig;
     /** Props override for Header component */

package/dist/hooks/useMarkdownTransform.d.ts

@@ -0,0 +1,3 @@
+import '@diplodoc/transform/dist/js/yfm';
+import { OptionsType } from '@diplodoc/transform/lib/typings';
+export declare function useMarkdownTransform(content: string, options?: OptionsType): string;

package/dist/hooks/useMarkdownTransform.js

@@ -0,0 +1,48 @@
+import { useMemo, useRef } from 'react';
+import transform from '@diplodoc/transform';
+import '@diplodoc/transform/dist/js/yfm';
+import { areOptionsEqual } from '../utils/markdownUtils';
+import { parseMarkdownIntoBlocks } from '../utils/parse-blocks';
+export function useMarkdownTransform(content, options) {
+    const cacheRef = useRef(new Map());
+    const prevOptionsRef = useRef(options);
+    return useMemo(() => {
+        if (!content) {
+            return '';
+        }
+        const optionsChanged = !areOptionsEqual(prevOptionsRef.current, options);
+        if (optionsChanged) {
+            cacheRef.current.clear();
+            prevOptionsRef.current = options;
+        }
+        try {
+            const blocks = parseMarkdownIntoBlocks(content);
+            const cache = cacheRef.current;
+            const htmlParts = [];
+            for (const block of blocks) {
+                let html = cache.get(block);
+                if (!html) {
+                    try {
+                        const result = transform(block, options);
+                        html = result.result.html;
+                        cache.set(block, html);
+                    }
+                    catch (_a) {
+                        html = '';
+                    }
+                }
+                htmlParts.push(html);
+            }
+            const currentBlocksSet = new Set(blocks);
+            for (const key of cache.keys()) {
+                if (!currentBlocksSet.has(key)) {
+                    cache.delete(key);
+                }
+            }
+            return htmlParts.join('');
+        }
+        catch (_b) {
+            return '';
+        }
+    }, [content, options]);
+}

package/dist/hooks/useRemend.d.ts

@@ -0,0 +1 @@
+export declare function useRemend(content: string, enabled: boolean): string;

package/dist/hooks/useRemend.js

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import remend from 'remend';
+export function useRemend(content, enabled) {
+    return useMemo(() => {
+        if (typeof content !== 'string' || content === '') {
+            return '';
+        }
+        if (!enabled) {
+            return content;
+        }
+        try {
+            return remend(content.trim());
+        }
+        catch (_a) {
+            return content;
+        }
+    }, [content, enabled]);
+}

package/dist/utils/markdownUtils.d.ts

@@ -0,0 +1,2 @@
+import { OptionsType } from '@diplodoc/transform/lib/typings';
+export declare function areOptionsEqual(prev?: OptionsType, next?: OptionsType): boolean;

package/dist/utils/markdownUtils.js

@@ -0,0 +1,19 @@
+export function areOptionsEqual(prev, next) {
+    if (prev === next) {
+        return true;
+    }
+    if (!prev || !next) {
+        return false;
+    }
+    const prevKeys = Object.keys(prev);
+    const nextKeys = Object.keys(next);
+    if (prevKeys.length !== nextKeys.length) {
+        return false;
+    }
+    for (const key of prevKeys) {
+        if (prev[key] !== next[key]) {
+            return false;
+        }
+    }
+    return true;
+}

package/dist/utils/parse-blocks.d.ts

@@ -0,0 +1 @@
+export declare const parseMarkdownIntoBlocks: (markdown: string) => string[];

package/dist/utils/parse-blocks.js

@@ -0,0 +1,62 @@
+import { Lexer } from 'marked';
+const footnoteReferencePattern = /\[\^[^\]\s]{1,200}\](?!:)/;
+const footnoteDefinitionPattern = /\[\^[^\]\s]{1,200}\]:/;
+const closingTagPattern = /<\/(\w+)>/;
+const openingTagPattern = /<(\w+)[\s>]/;
+const handleHtmlBlock = (token, htmlStack, lastBlock) => {
+    if (htmlStack.length === 0) {
+        return null;
+    }
+    const merged = lastBlock + token.raw;
+    let shouldPopStack = false;
+    if (token.type === 'html') {
+        const closingTagMatch = token.raw.match(closingTagPattern);
+        if (closingTagMatch) {
+            const closingTag = closingTagMatch[1];
+            if (htmlStack[htmlStack.length - 1] === closingTag) {
+                shouldPopStack = true;
+            }
+        }
+    }
+    return { merged, shouldPopStack };
+};
+const processOpeningHtmlTag = (token, htmlStack) => {
+    if (token.type !== 'html' || !token.block) {
+        return;
+    }
+    const openingTagMatch = token.raw.match(openingTagPattern);
+    if (openingTagMatch) {
+        const tagName = openingTagMatch[1];
+        const hasClosingTag = token.raw.includes(`</${tagName}>`);
+        if (!hasClosingTag) {
+            htmlStack.push(tagName);
+        }
+    }
+};
+export const parseMarkdownIntoBlocks = (markdown) => {
+    const hasFootnoteReference = footnoteReferencePattern.test(markdown);
+    const hasFootnoteDefinition = footnoteDefinitionPattern.test(markdown);
+    if (hasFootnoteReference || hasFootnoteDefinition) {
+        return [markdown];
+    }
+    const tokens = Lexer.lex(markdown, { gfm: true });
+    const mergedBlocks = [];
+    const htmlStack = [];
+    for (const token of tokens) {
+        const currentBlock = token.raw;
+        if (mergedBlocks.length > 0) {
+            const lastBlock = mergedBlocks[mergedBlocks.length - 1];
+            const htmlResult = handleHtmlBlock(token, htmlStack, lastBlock);
+            if (htmlResult) {
+                mergedBlocks[mergedBlocks.length - 1] = htmlResult.merged;
+                if (htmlResult.shouldPopStack) {
+                    htmlStack.pop();
+                }
+                continue;
+            }
+        }
+        processOpeningHtmlTag(token, htmlStack);
+        mergedBlocks.push(currentBlock);
+    }
+    return mergedBlocks;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/aikit",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "Gravity UI base kit for building ai assistant chats",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -73,13 +73,13 @@
     "@babel/preset-typescript": "^7.28.5",
     "@commitlint/cli": "^19.0.3",
     "@commitlint/config-conventional": "^19.0.3",
+    "@diplodoc/transform": "^4.63.3",
     "@gravity-ui/eslint-config": "^3.1.1",
+    "@gravity-ui/i18n": "^1.8.0",
+    "@gravity-ui/icons": "^2.16.0",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@diplodoc/transform": "^4.63.3",
-    "@gravity-ui/i18n": "^1.8.0",
-    "@gravity-ui/icons": "^2.16.0",
     "@gravity-ui/uikit": "^7.25.0",
     "@playwright/experimental-ct-react": "^1.56.1",
     "@playwright/test": "^1.56.1",
@@ -118,13 +118,13 @@
     "typescript": "^5.4.2"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
     "@diplodoc/transform": "^4.63.3",
     "@gravity-ui/i18n": "^1.8.0",
     "@gravity-ui/icons": "^2.16.0",
     "@gravity-ui/uikit": "^7.25.0",
-    "highlight.js": "^11.11.1"
+    "highlight.js": "^11.11.1",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "nano-staged": {
     "*.{scss}": [
@@ -140,7 +140,9 @@
   "dependencies": {
     "@bem-react/classname": "^1.7.0",
     "dayjs": "^1.11.19",
+    "marked": "^17.0.1",
     "react-window": "^2.2.1",
+    "remend": "^1.0.1",
     "uuid": "^13.0.0"
   }
 }