@ai-react-markdown/mantine 1.8.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -46
- package/dist/index.cjs +89 -79
- package/dist/index.cjs.map +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +76 -61
- package/dist/index.d.ts +76 -61
- package/dist/index.js +63 -49
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
Mantine UI integration for `@ai-react-markdown/core`. Provides a drop-in `<MantineAIMarkdown>` component that renders AI-generated markdown with Mantine-themed typography, syntax-highlighted code blocks, Mermaid diagrams, and automatic color scheme detection.
|
|
8
8
|
|
|
9
|
+
> **Upgrading from 1.x?** v2.0.0 removes the 1.x object-based `config` channel — the Mantine code-block options move to a flat `codeBlock` prop, and the render-state hook is replaced by narrow hooks plus `useMantineCodeBlockOptions()`. See the [migration guide](../../docs/migrating-to-v2.md).
|
|
10
|
+
|
|
9
11
|
## What It Adds on Top of Core
|
|
10
12
|
|
|
11
13
|
- **Mantine typography** -- markdown content is wrapped in Mantine's `<Typography>` so it inherits the active theme's font family, line height, and color tokens
|
|
@@ -36,7 +38,7 @@ yarn add @ai-react-markdown/mantine @ai-react-markdown/core
|
|
|
36
38
|
{
|
|
37
39
|
"react": ">=19",
|
|
38
40
|
"react-dom": ">=19",
|
|
39
|
-
"@ai-react-markdown/core": "^
|
|
41
|
+
"@ai-react-markdown/core": "^2.0.0",
|
|
40
42
|
"@mantine/core": "^9.0.0",
|
|
41
43
|
"@mantine/code-highlight": "^9.0.0",
|
|
42
44
|
"highlight.js": "^11.11.1"
|
|
@@ -92,69 +94,82 @@ function StreamingChat({ content, isStreaming }: { content: string; isStreaming:
|
|
|
92
94
|
|
|
93
95
|
## Props API Reference
|
|
94
96
|
|
|
95
|
-
### `MantineAIMarkdownProps<
|
|
96
|
-
|
|
97
|
-
`MantineAIMarkdownProps
|
|
98
|
-
|
|
99
|
-
| Prop | Type
|
|
100
|
-
| ---------------------- |
|
|
101
|
-
| `content` | `string`
|
|
102
|
-
| `streaming` | `boolean`
|
|
103
|
-
| `fontSize` | `number \| string`
|
|
104
|
-
| `variant` | `AIMarkdownVariant`
|
|
105
|
-
| `colorScheme` | `AIMarkdownColorScheme`
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
109
|
-
| `
|
|
110
|
-
| `
|
|
111
|
-
| `
|
|
112
|
-
| `
|
|
113
|
-
| `documentId` | `string` | auto via `useId()` | Stable id namespace for clobberable attributes. See the [core docs](../core/README.md#aimarkdownpropstconfig-trenderdata) for full semantics. Required for cross-chunk mode. |
|
|
97
|
+
### `MantineAIMarkdownProps<TMetadata>`
|
|
98
|
+
|
|
99
|
+
`MantineAIMarkdownProps<TMetadata>` extends `AIMarkdownProps<TMetadata>` -- every core prop (`enginePlugins`, `blockMemo`, `incrementalParse`, `preserveOrphanReferences`, `streamingCursor`, …) is supported, plus the Mantine-specific `codeBlock` prop. The table below lists the props with a Mantine-specific default override or addition (props not listed here inherit core defaults unchanged — see the [core props table](../core/README.md#aimarkdownpropstmetadata)).
|
|
100
|
+
|
|
101
|
+
| Prop | Type | Default | Description |
|
|
102
|
+
| ---------------------- | ---------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
103
|
+
| `content` | `string` | **(required)** | Raw markdown content to render. |
|
|
104
|
+
| `streaming` | `boolean` | `false` | Whether content is actively being streamed. |
|
|
105
|
+
| `fontSize` | `number \| string` | `'0.9375rem'` | Base font size. Numbers are treated as pixels. Inherited from core. |
|
|
106
|
+
| `variant` | `AIMarkdownVariant` | `'default'` | Typography variant name. |
|
|
107
|
+
| `colorScheme` | `AIMarkdownColorScheme` | Auto-detected | Color scheme. When omitted, defaults to Mantine's computed color scheme via `useComputedColorScheme('light')`. |
|
|
108
|
+
| `metadata` | `TMetadata` | `undefined` | Arbitrary data for custom components via dedicated context. |
|
|
109
|
+
| `contentPreprocessors` | `AIMDContentPreprocessor[]` | `[]` | Additional preprocessors run after the built-in LaTeX preprocessor. |
|
|
110
|
+
| `customComponents` | `AIMarkdownCustomComponents` | Mantine defaults | Component overrides, merged with Mantine's built-in `<pre>` handler. Caller overrides take precedence -- including `pre` here disables Mantine's code-block features. |
|
|
111
|
+
| `Typography` | `AIMarkdownTypographyComponent` | `MantineAIMarkdownTypography` | Typography wrapper component. |
|
|
112
|
+
| `ExtraStyles` | `AIMarkdownExtraStylesComponent` | `MantineAIMDefaultExtraStyles` | Extra style wrapper rendered between typography and content. |
|
|
113
|
+
| `documentId` | `string` | auto via `useId()` | Stable id namespace for clobberable attributes. See the [core docs](../core/README.md#aimarkdownpropstmetadata) for full semantics. Required for cross-chunk mode. |
|
|
114
|
+
| `codeBlock` | `Partial<MantineCodeBlockOptions>` | `defaultMantineCodeBlockOptions` | Code-block behavior group (Mantine-specific). The group value replaces atomically; omitted fields resolve to the shipped defaults inside `useMantineCodeBlockOptions()`. `null` counts as absent. |
|
|
114
115
|
|
|
115
116
|
## Configuration
|
|
116
117
|
|
|
117
|
-
The Mantine package
|
|
118
|
-
|
|
119
|
-
### `MantineAIMarkdownRenderConfig`
|
|
118
|
+
The Mantine package adds one behavior group on top of core's flat props: the `codeBlock` prop. All core flat props (`enginePlugins`, `blockMemo`, `incrementalParse`, `preserveOrphanReferences`, …) remain available unchanged.
|
|
120
119
|
|
|
121
|
-
|
|
120
|
+
### `codeBlock` (`Partial<MantineCodeBlockOptions>`)
|
|
122
121
|
|
|
123
|
-
| Field
|
|
124
|
-
|
|
|
125
|
-
| `
|
|
126
|
-
| `
|
|
122
|
+
| Field | Type | Default | Description |
|
|
123
|
+
| --------------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
|
|
124
|
+
| `defaultExpanded` | `boolean` | `true` | Whether code blocks start in their expanded state. When `false`, long blocks are collapsed with an expand button. |
|
|
125
|
+
| `autoDetectUnknownLanguage` | `boolean` | `false` | When `true`, uses `highlight.js`'s `highlightAuto` to determine the language of code blocks lacking an explicit annotation. |
|
|
127
126
|
|
|
128
127
|
### Example: Collapsed Code Blocks
|
|
129
128
|
|
|
130
129
|
```tsx
|
|
131
|
-
<MantineAIMarkdown
|
|
132
|
-
content={markdown}
|
|
133
|
-
config={{
|
|
134
|
-
codeBlock: { defaultExpanded: false },
|
|
135
|
-
}}
|
|
136
|
-
/>
|
|
130
|
+
<MantineAIMarkdown content={markdown} codeBlock={{ defaultExpanded: false }} />
|
|
137
131
|
```
|
|
138
132
|
|
|
139
|
-
|
|
133
|
+
The group value replaces **atomically** -- omitted fields fall to the shipped defaults (`defaultMantineCodeBlockOptions`), applied exactly once inside `useMantineCodeBlockOptions()`. There is no deep merge.
|
|
134
|
+
|
|
135
|
+
For integration-time packaging, the package re-exports a widened behaviors factory (core behavior fields + `codeBlock`):
|
|
136
|
+
|
|
137
|
+
```tsx
|
|
138
|
+
import { defineMantineBehaviors } from '@ai-react-markdown/mantine';
|
|
139
|
+
|
|
140
|
+
const BEHAVIORS = defineMantineBehaviors({ blockMemo: false, codeBlock: { defaultExpanded: false } });
|
|
141
|
+
|
|
142
|
+
<MantineAIMarkdown content={markdown} {...BEHAVIORS} />;
|
|
143
|
+
```
|
|
140
144
|
|
|
141
145
|
## Hooks
|
|
142
146
|
|
|
143
|
-
### `
|
|
147
|
+
### `useMantineCodeBlockOptions()`
|
|
144
148
|
|
|
145
|
-
|
|
149
|
+
Narrow hook for the `codeBlock` behavior group -- the single place the group's type assertion and defaults live. Returns `Required<MantineCodeBlockOptions>`: the caller-passed group merged over `defaultMantineCodeBlockOptions`.
|
|
146
150
|
|
|
147
151
|
```tsx
|
|
148
|
-
import {
|
|
152
|
+
import { useMantineCodeBlockOptions } from '@ai-react-markdown/mantine';
|
|
149
153
|
|
|
150
154
|
function MyCodeBlock() {
|
|
151
|
-
const {
|
|
152
|
-
const startsExpanded = config.codeBlock.defaultExpanded;
|
|
155
|
+
const { defaultExpanded, autoDetectUnknownLanguage } = useMantineCodeBlockOptions();
|
|
153
156
|
// ...
|
|
154
157
|
}
|
|
155
158
|
```
|
|
156
159
|
|
|
157
|
-
|
|
160
|
+
For everything else (streaming state, theme, document ids, core behavior switches), use core's narrow hooks directly -- `useAIMarkdownState()`, `useAIMarkdownTheme()`, `useAIMarkdownDocument()`, `useAIMarkdownBehaviors()` -- or the aggregate `useAIMarkdown()` for low-frequency components. See the [core hooks reference](../core/README.md#hooks).
|
|
161
|
+
|
|
162
|
+
```tsx
|
|
163
|
+
import { useAIMarkdownState, useAIMarkdownTheme } from '@ai-react-markdown/core';
|
|
164
|
+
import { useMantineCodeBlockOptions } from '@ai-react-markdown/mantine';
|
|
165
|
+
|
|
166
|
+
function MyCodeBlock() {
|
|
167
|
+
const { streaming } = useAIMarkdownState();
|
|
168
|
+
const { colorScheme } = useAIMarkdownTheme();
|
|
169
|
+
const { defaultExpanded } = useMantineCodeBlockOptions();
|
|
170
|
+
// ...
|
|
171
|
+
}
|
|
172
|
+
```
|
|
158
173
|
|
|
159
174
|
### `useMantineAIMarkdownMetadata<TMetadata>()`
|
|
160
175
|
|
|
@@ -222,10 +237,10 @@ function App() {
|
|
|
222
237
|
|
|
223
238
|
### Language Auto-Detection
|
|
224
239
|
|
|
225
|
-
By default, code blocks without an explicit language annotation render as plaintext. Enable auto-detection via
|
|
240
|
+
By default, code blocks without an explicit language annotation render as plaintext. Enable auto-detection via the `codeBlock` prop:
|
|
226
241
|
|
|
227
242
|
```tsx
|
|
228
|
-
<MantineAIMarkdown content={markdown}
|
|
243
|
+
<MantineAIMarkdown content={markdown} codeBlock={{ autoDetectUnknownLanguage: true }} />
|
|
229
244
|
```
|
|
230
245
|
|
|
231
246
|
This uses `highlight.js`'s `highlightAuto` to guess the language. Results may vary for short or ambiguous snippets.
|
|
@@ -341,16 +356,21 @@ Caller-provided `Typography`, `ExtraStyles`, and `customComponents` props overri
|
|
|
341
356
|
### Types
|
|
342
357
|
|
|
343
358
|
- `MantineAIMarkdownProps`
|
|
344
|
-
- `MantineAIMarkdownRenderConfig`
|
|
345
359
|
- `MantineAIMarkdownMetadata`
|
|
360
|
+
- `MantineCodeBlockOptions` -- the `codeBlock` group shape
|
|
361
|
+
- `MantineBehaviorProps` -- input type of `defineMantineBehaviors`
|
|
346
362
|
|
|
347
363
|
### Constants
|
|
348
364
|
|
|
349
|
-
- `
|
|
365
|
+
- `defaultMantineCodeBlockOptions` -- shipped defaults of the `codeBlock` behavior group (frozen)
|
|
366
|
+
|
|
367
|
+
### Factories
|
|
368
|
+
|
|
369
|
+
- `defineMantineBehaviors()` -- widened behaviors factory (core behavior fields + `codeBlock`); identity + types + `Object.freeze`, zero logic
|
|
350
370
|
|
|
351
371
|
### Hooks
|
|
352
372
|
|
|
353
|
-
- `
|
|
373
|
+
- `useMantineCodeBlockOptions()` -- typed access to the `codeBlock` group with defaults applied
|
|
354
374
|
- `useMantineAIMarkdownMetadata<TMetadata>()` -- typed metadata access
|
|
355
375
|
|
|
356
376
|
## Core Package
|
package/dist/index.cjs
CHANGED
|
@@ -33,16 +33,17 @@ __export(index_exports, {
|
|
|
33
33
|
MantineAIMDefaultExtraStyles: () => DefaultExtraStyles_default,
|
|
34
34
|
MantineAIMarkdownTypography: () => MantineTypography_default,
|
|
35
35
|
default: () => MantineAIMarkdown_default,
|
|
36
|
-
|
|
36
|
+
defaultMantineCodeBlockOptions: () => defaultMantineCodeBlockOptions,
|
|
37
|
+
defineMantineBehaviors: () => defineMantineBehaviors,
|
|
37
38
|
useMantineAIMarkdownMetadata: () => useMantineAIMarkdownMetadata,
|
|
38
|
-
|
|
39
|
+
useMantineCodeBlockOptions: () => useMantineCodeBlockOptions
|
|
39
40
|
});
|
|
40
41
|
module.exports = __toCommonJS(index_exports);
|
|
41
42
|
|
|
42
43
|
// src/MantineAIMarkdown.tsx
|
|
43
|
-
var
|
|
44
|
-
var
|
|
45
|
-
var
|
|
44
|
+
var import_react5 = require("react");
|
|
45
|
+
var import_core6 = __toESM(require("@ai-react-markdown/core"), 1);
|
|
46
|
+
var import_core7 = require("@ai-react-markdown/core");
|
|
46
47
|
|
|
47
48
|
// src/components/typography/MantineTypography.tsx
|
|
48
49
|
var import_react = require("react");
|
|
@@ -59,33 +60,36 @@ var MantineAIMDefaultExtraStyles = ({ children }) => {
|
|
|
59
60
|
};
|
|
60
61
|
var DefaultExtraStyles_default = MantineAIMDefaultExtraStyles;
|
|
61
62
|
|
|
62
|
-
// src/defs.tsx
|
|
63
|
-
var import_core2 = require("@ai-react-markdown/core");
|
|
64
|
-
var defaultMantineAIMarkdownRenderConfig = Object.freeze({
|
|
65
|
-
...import_core2.defaultAIMarkdownRenderConfig,
|
|
66
|
-
codeBlock: Object.freeze({
|
|
67
|
-
defaultExpanded: true,
|
|
68
|
-
autoDetectUnknownLanguage: false
|
|
69
|
-
})
|
|
70
|
-
});
|
|
71
|
-
|
|
72
63
|
// src/components/customized/PreCode.tsx
|
|
73
|
-
var
|
|
64
|
+
var import_react4 = require("react");
|
|
74
65
|
var import_code_highlight2 = require("@mantine/code-highlight");
|
|
75
66
|
var import_deep_parse_json = require("deep-parse-json");
|
|
76
67
|
var import_highlight = __toESM(require("highlight.js"), 1);
|
|
68
|
+
var import_core5 = require("@ai-react-markdown/core");
|
|
77
69
|
|
|
78
|
-
// src/hooks/
|
|
79
|
-
var
|
|
80
|
-
var
|
|
81
|
-
|
|
82
|
-
|
|
70
|
+
// src/hooks/useMantineCodeBlockOptions.ts
|
|
71
|
+
var import_react2 = require("react");
|
|
72
|
+
var import_core2 = require("@ai-react-markdown/core");
|
|
73
|
+
|
|
74
|
+
// src/defs.tsx
|
|
75
|
+
var defaultMantineCodeBlockOptions = Object.freeze({
|
|
76
|
+
defaultExpanded: true,
|
|
77
|
+
autoDetectUnknownLanguage: false
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
// src/hooks/useMantineCodeBlockOptions.ts
|
|
81
|
+
function useMantineCodeBlockOptions() {
|
|
82
|
+
const behaviors = (0, import_core2.useAIMarkdownBehaviors)();
|
|
83
|
+
const group = behaviors.codeBlock;
|
|
84
|
+
return (0, import_react2.useMemo)(() => ({ ...defaultMantineCodeBlockOptions, ...group }), [group]);
|
|
85
|
+
}
|
|
83
86
|
|
|
84
87
|
// src/components/customized/MermaidCode/index.tsx
|
|
85
|
-
var
|
|
88
|
+
var import_react3 = require("react");
|
|
86
89
|
var import_code_highlight = require("@mantine/code-highlight");
|
|
87
|
-
var
|
|
90
|
+
var import_core3 = require("@mantine/core");
|
|
88
91
|
var import_mermaid = __toESM(require("mermaid"), 1);
|
|
92
|
+
var import_core4 = require("@ai-react-markdown/core");
|
|
89
93
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
90
94
|
var PRE_STYLE = { cursor: "pointer", overflow: "auto", width: "100%", padding: "0.5rem" };
|
|
91
95
|
var sameView = (a, b) => a.kind === "diagram" && b.kind === "diagram" ? a.chartType === b.chartType : a.kind === b.kind;
|
|
@@ -122,19 +126,20 @@ var handleViewSVGInNewWindow = (svgElement, isDark) => {
|
|
|
122
126
|
setTimeout(() => URL.revokeObjectURL(url), 5e3);
|
|
123
127
|
}
|
|
124
128
|
};
|
|
125
|
-
var MantineAIMMermaidCode = (0,
|
|
126
|
-
const
|
|
127
|
-
const
|
|
128
|
-
const
|
|
129
|
-
const
|
|
130
|
-
const
|
|
131
|
-
const
|
|
132
|
-
const
|
|
133
|
-
const
|
|
134
|
-
const
|
|
135
|
-
const
|
|
136
|
-
const [
|
|
137
|
-
(0,
|
|
129
|
+
var MantineAIMMermaidCode = (0, import_react3.memo)((props) => {
|
|
130
|
+
const { colorScheme, fontSize } = (0, import_core4.useAIMarkdownTheme)();
|
|
131
|
+
const { streaming } = (0, import_core4.useAIMarkdownState)();
|
|
132
|
+
const { defaultExpanded } = useMantineCodeBlockOptions();
|
|
133
|
+
const isDark = colorScheme === "dark";
|
|
134
|
+
const ref = (0, import_react3.useRef)(null);
|
|
135
|
+
const renderVersionRef = (0, import_react3.useRef)(0);
|
|
136
|
+
const viewRef = (0, import_react3.useRef)({ kind: "source" });
|
|
137
|
+
const prevStreamingRef = (0, import_react3.useRef)(false);
|
|
138
|
+
const needsCorrectiveRef = (0, import_react3.useRef)(false);
|
|
139
|
+
const lastSuccessRef = (0, import_react3.useRef)(null);
|
|
140
|
+
const [view, setViewState] = (0, import_react3.useState)({ kind: "source" });
|
|
141
|
+
const [showOriginalCode, setShowOriginalCode] = (0, import_react3.useState)(false);
|
|
142
|
+
(0, import_react3.useEffect)(() => {
|
|
138
143
|
const applyView = (next) => {
|
|
139
144
|
viewRef.current = next;
|
|
140
145
|
setViewState((prev) => sameView(prev, next) ? prev : next);
|
|
@@ -201,7 +206,7 @@ var MantineAIMMermaidCode = (0, import_react2.memo)((props) => {
|
|
|
201
206
|
cancelled = true;
|
|
202
207
|
};
|
|
203
208
|
}, [props.code, isDark, showOriginalCode, streaming]);
|
|
204
|
-
const viewSvgInNewWindow = (0,
|
|
209
|
+
const viewSvgInNewWindow = (0, import_react3.useCallback)(() => {
|
|
205
210
|
handleViewSVGInNewWindow(ref.current?.querySelector("svg"), isDark);
|
|
206
211
|
}, [isDark]);
|
|
207
212
|
const showSourceFallback = showOriginalCode || view.kind !== "diagram";
|
|
@@ -210,7 +215,7 @@ var MantineAIMMermaidCode = (0, import_react2.memo)((props) => {
|
|
|
210
215
|
import_code_highlight.CodeHighlightTabs,
|
|
211
216
|
{
|
|
212
217
|
mb: 15,
|
|
213
|
-
fz:
|
|
218
|
+
fz: fontSize,
|
|
214
219
|
w: "100%",
|
|
215
220
|
code: [
|
|
216
221
|
{
|
|
@@ -219,7 +224,7 @@ var MantineAIMMermaidCode = (0, import_react2.memo)((props) => {
|
|
|
219
224
|
language: "mermaid"
|
|
220
225
|
}
|
|
221
226
|
],
|
|
222
|
-
defaultExpanded
|
|
227
|
+
defaultExpanded,
|
|
223
228
|
maxCollapsedHeight: "320px",
|
|
224
229
|
styles: {
|
|
225
230
|
filesScrollarea: {
|
|
@@ -242,7 +247,7 @@ var MantineAIMMermaidCode = (0, import_react2.memo)((props) => {
|
|
|
242
247
|
onClick: () => {
|
|
243
248
|
setShowOriginalCode(false);
|
|
244
249
|
},
|
|
245
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
250
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Flex, { align: "center", justify: "center", w: 18, h: 18, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "icon-[gravity-ui--logo-mermaid] relative bottom-[1px] text-[16px]" }) })
|
|
246
251
|
},
|
|
247
252
|
"gpt"
|
|
248
253
|
)
|
|
@@ -262,9 +267,9 @@ var MantineAIMMermaidCode = (0, import_react2.memo)((props) => {
|
|
|
262
267
|
children: [
|
|
263
268
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "chart-header", children: [
|
|
264
269
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "chart-type-tag", children: view.kind === "diagram" ? view.chartType : "unknown" }),
|
|
265
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
266
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
267
|
-
|
|
270
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Flex, { align: "center", justify: "flex-end", gap: 0, children: [
|
|
271
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Tooltip, { label: "Show Mermaid Code", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
272
|
+
import_core3.ActionIcon,
|
|
268
273
|
{
|
|
269
274
|
size: 28,
|
|
270
275
|
className: "action-icon",
|
|
@@ -272,10 +277,10 @@ var MantineAIMMermaidCode = (0, import_react2.memo)((props) => {
|
|
|
272
277
|
onClick: () => {
|
|
273
278
|
setShowOriginalCode(true);
|
|
274
279
|
},
|
|
275
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
280
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Flex, { align: "center", justify: "center", w: 18, h: 18, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "icon-[entypo--code] relative bottom-[0.25px] text-[16px]" }) })
|
|
276
281
|
}
|
|
277
282
|
) }),
|
|
278
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
283
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.CopyButton, { value: props.code, children: ({ copied, copy }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "right", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ActionIcon, { variant: "transparent", size: 28, className: "action-icon", onClick: copy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "icon-origin-[lucide--check] text-[18px]" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
279
284
|
"svg",
|
|
280
285
|
{
|
|
281
286
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -312,17 +317,18 @@ var SpecialCodeLanguage = /* @__PURE__ */ ((SpecialCodeLanguage2) => {
|
|
|
312
317
|
return SpecialCodeLanguage2;
|
|
313
318
|
})(SpecialCodeLanguage || {});
|
|
314
319
|
var SPECIAL_LANGUAGES = new Set(Object.values(SpecialCodeLanguage));
|
|
315
|
-
var MantineAIMPreCode = (0,
|
|
320
|
+
var MantineAIMPreCode = (0, import_react4.memo)(
|
|
316
321
|
(props) => {
|
|
317
|
-
const
|
|
318
|
-
const
|
|
322
|
+
const { fontSize } = (0, import_core5.useAIMarkdownTheme)();
|
|
323
|
+
const { autoDetectUnknownLanguage, defaultExpanded } = useMantineCodeBlockOptions();
|
|
324
|
+
const codeLanguage = (0, import_react4.useMemo)(() => {
|
|
319
325
|
if (props.existLanguage) return props.existLanguage;
|
|
320
|
-
if (
|
|
326
|
+
if (autoDetectUnknownLanguage) {
|
|
321
327
|
return import_highlight.default.highlightAuto(props.codeText).language || "";
|
|
322
328
|
}
|
|
323
329
|
return "";
|
|
324
|
-
}, [props.existLanguage, props.codeText,
|
|
325
|
-
const [usedCodeLanguage, usedFileName] = (0,
|
|
330
|
+
}, [props.existLanguage, props.codeText, autoDetectUnknownLanguage]);
|
|
331
|
+
const [usedCodeLanguage, usedFileName] = (0, import_react4.useMemo)(() => {
|
|
326
332
|
if (!codeLanguage) return ["plaintext", "unknown"];
|
|
327
333
|
if (!import_highlight.default.getLanguage(codeLanguage)) {
|
|
328
334
|
return ["plaintext", codeLanguage];
|
|
@@ -330,7 +336,7 @@ var MantineAIMPreCode = (0, import_react3.memo)(
|
|
|
330
336
|
return [codeLanguage, codeLanguage];
|
|
331
337
|
}, [codeLanguage]);
|
|
332
338
|
const isSpecialCodeBlock = SPECIAL_LANGUAGES.has(codeLanguage);
|
|
333
|
-
const normalCodeBlockContent = (0,
|
|
339
|
+
const normalCodeBlockContent = (0, import_react4.useMemo)(() => {
|
|
334
340
|
if (isSpecialCodeBlock) return null;
|
|
335
341
|
let usedCodeStr = props.codeText;
|
|
336
342
|
if (usedCodeStr && usedCodeLanguage.toLowerCase() === "json") {
|
|
@@ -341,19 +347,19 @@ var MantineAIMPreCode = (0, import_react3.memo)(
|
|
|
341
347
|
import_code_highlight2.CodeHighlight,
|
|
342
348
|
{
|
|
343
349
|
mb: 15,
|
|
344
|
-
fz:
|
|
350
|
+
fz: fontSize,
|
|
345
351
|
w: "100%",
|
|
346
352
|
code: usedCodeStr,
|
|
347
353
|
withBorder: true,
|
|
348
354
|
withExpandButton: true,
|
|
349
|
-
defaultExpanded
|
|
355
|
+
defaultExpanded,
|
|
350
356
|
maxCollapsedHeight: "320px"
|
|
351
357
|
}
|
|
352
358
|
) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
353
359
|
import_code_highlight2.CodeHighlightTabs,
|
|
354
360
|
{
|
|
355
361
|
mb: 15,
|
|
356
|
-
fz:
|
|
362
|
+
fz: fontSize,
|
|
357
363
|
w: "100%",
|
|
358
364
|
code: [
|
|
359
365
|
{
|
|
@@ -364,19 +370,12 @@ var MantineAIMPreCode = (0, import_react3.memo)(
|
|
|
364
370
|
],
|
|
365
371
|
withBorder: true,
|
|
366
372
|
withExpandButton: true,
|
|
367
|
-
defaultExpanded
|
|
373
|
+
defaultExpanded,
|
|
368
374
|
maxCollapsedHeight: "320px"
|
|
369
375
|
}
|
|
370
376
|
);
|
|
371
|
-
}, [
|
|
372
|
-
|
|
373
|
-
props.codeText,
|
|
374
|
-
usedCodeLanguage,
|
|
375
|
-
usedFileName,
|
|
376
|
-
renderState.fontSize,
|
|
377
|
-
renderState.config.codeBlock.defaultExpanded
|
|
378
|
-
]);
|
|
379
|
-
const specialCodeBlockContent = (0, import_react3.useMemo)(() => {
|
|
377
|
+
}, [isSpecialCodeBlock, props.codeText, usedCodeLanguage, usedFileName, fontSize, defaultExpanded]);
|
|
378
|
+
const specialCodeBlockContent = (0, import_react4.useMemo)(() => {
|
|
380
379
|
switch (codeLanguage) {
|
|
381
380
|
case "mermaid" /* Mermaid */:
|
|
382
381
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MermaidCode_default, { code: props.codeText });
|
|
@@ -391,8 +390,12 @@ MantineAIMPreCode.displayName = "MantineAIMPreCode";
|
|
|
391
390
|
var PreCode_default = MantineAIMPreCode;
|
|
392
391
|
|
|
393
392
|
// src/MantineAIMarkdown.tsx
|
|
394
|
-
var
|
|
393
|
+
var import_core8 = require("@mantine/core");
|
|
395
394
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
395
|
+
var EMPTY_CODE_BLOCK = Object.freeze({});
|
|
396
|
+
var MANTINE_STABILITY_TABLE = {
|
|
397
|
+
codeBlock: import_core7.AIMarkdownStabilityPolicy.DEEP_EQUAL
|
|
398
|
+
};
|
|
396
399
|
var DefaultCustomComponents = {
|
|
397
400
|
pre: ({ node, ...usefulProps }) => {
|
|
398
401
|
const code = node?.children[0];
|
|
@@ -408,43 +411,50 @@ var DefaultCustomComponents = {
|
|
|
408
411
|
var MantineAIMarkdownComponent = ({
|
|
409
412
|
Typography: Typography2 = MantineTypography_default,
|
|
410
413
|
ExtraStyles = DefaultExtraStyles_default,
|
|
411
|
-
defaultConfig = defaultMantineAIMarkdownRenderConfig,
|
|
412
414
|
customComponents,
|
|
413
415
|
colorScheme,
|
|
416
|
+
codeBlock,
|
|
414
417
|
...props
|
|
415
418
|
}) => {
|
|
416
|
-
const stableCustomComponents = (0,
|
|
417
|
-
const usedComponents = (0,
|
|
419
|
+
const stableCustomComponents = (0, import_core7.useStableValue)(customComponents);
|
|
420
|
+
const usedComponents = (0, import_react5.useMemo)(() => {
|
|
418
421
|
return stableCustomComponents ? { ...DefaultCustomComponents, ...stableCustomComponents } : DefaultCustomComponents;
|
|
419
422
|
}, [stableCustomComponents]);
|
|
420
|
-
const computedColorScheme = (0,
|
|
421
|
-
|
|
422
|
-
|
|
423
|
+
const computedColorScheme = (0, import_core8.useComputedColorScheme)("light");
|
|
424
|
+
const stable = (0, import_core7.useStableRecord)({ codeBlock }, MANTINE_STABILITY_TABLE);
|
|
425
|
+
const behaviorGroups = (0, import_react5.useMemo)(() => ({ codeBlock: stable.codeBlock ?? EMPTY_CODE_BLOCK }), [stable.codeBlock]);
|
|
426
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core7.AIMarkdownBehaviorsProvider, { value: behaviorGroups, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
427
|
+
import_core6.default,
|
|
423
428
|
{
|
|
424
429
|
Typography: Typography2,
|
|
425
430
|
ExtraStyles,
|
|
426
|
-
defaultConfig,
|
|
427
431
|
customComponents: usedComponents,
|
|
428
432
|
colorScheme: colorScheme ?? computedColorScheme,
|
|
429
433
|
...props
|
|
430
434
|
}
|
|
431
|
-
);
|
|
435
|
+
) });
|
|
432
436
|
};
|
|
433
|
-
var MantineAIMarkdown = (0,
|
|
437
|
+
var MantineAIMarkdown = (0, import_react5.memo)(MantineAIMarkdownComponent);
|
|
434
438
|
MantineAIMarkdown.displayName = "MantineAIMarkdown";
|
|
435
439
|
var MantineAIMarkdown_default = MantineAIMarkdown;
|
|
436
440
|
|
|
441
|
+
// src/define.ts
|
|
442
|
+
function defineMantineBehaviors(values) {
|
|
443
|
+
return Object.freeze(values);
|
|
444
|
+
}
|
|
445
|
+
|
|
437
446
|
// src/hooks/useMantineAIMarkdownMetadata.ts
|
|
438
|
-
var
|
|
447
|
+
var import_core9 = require("@ai-react-markdown/core");
|
|
439
448
|
var useMantineAIMarkdownMetadata = () => {
|
|
440
|
-
return (0,
|
|
449
|
+
return (0, import_core9.useAIMarkdownMetadata)();
|
|
441
450
|
};
|
|
442
451
|
// Annotate the CommonJS export names for ESM import in node:
|
|
443
452
|
0 && (module.exports = {
|
|
444
453
|
MantineAIMDefaultExtraStyles,
|
|
445
454
|
MantineAIMarkdownTypography,
|
|
446
|
-
|
|
455
|
+
defaultMantineCodeBlockOptions,
|
|
456
|
+
defineMantineBehaviors,
|
|
447
457
|
useMantineAIMarkdownMetadata,
|
|
448
|
-
|
|
458
|
+
useMantineCodeBlockOptions
|
|
449
459
|
});
|
|
450
460
|
//# sourceMappingURL=index.cjs.map
|