@dynatrace/strato-components 3.13.2 → 3.14.0

package/content/accordion/Accordion.css

@@ -1,45 +1,45 @@
-._12zc70k0-3-13-2 {
+._12zc70k0-3-14-0 {
   width: 100%;
-  color: var(--_bx32h0-3-13-2);
+  color: var(--_bx32h0-3-14-0);
 }
-._12zc70k1-3-13-2 {
+._12zc70k1-3-14-0 {
   margin: var(--dt-spacings-size-8, 8px) 0;
 }
-._12zc70k2-3-13-2 {
+._12zc70k2-3-14-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }
-._12zc70k3-3-13-2 {
+._12zc70k3-3-14-0 {
   transition-duration: var(--dt-animations-expand-collapse-duration-fast, 250ms);
   transition-timing-function: var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-property: transform;
 }
-._12zc70k4-3-13-2 {
+._12zc70k4-3-14-0 {
   transform: rotate(-90deg);
 }
-._12zc70k5-3-13-2 {
+._12zc70k5-3-14-0 {
   transform: rotate(90deg);
 }
-._12zc70k6-3-13-2 {
+._12zc70k6-3-14-0 {
   transform: rotate(0);
 }
-._12zc70k7-3-13-2 {
+._12zc70k7-3-14-0 {
   box-sizing: border-box;
   transform-origin: top center;
   display: flex;
 }
-._12zc70k8-3-13-2 {
+._12zc70k8-3-14-0 {
   width: 100%;
   box-sizing: border-box;
-  color: var(--_bx32h0-3-13-2);
+  color: var(--_bx32h0-3-14-0);
 }
-._12zc70k9-3-13-2 {
+._12zc70k9-3-14-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
 }
-._12zc70ka-3-13-2 {
+._12zc70ka-3-14-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
 }
 @media (prefers-reduced-motion) {
-  ._12zc70k3-3-13-2 {
+  ._12zc70k3-3-14-0 {
     transition-duration: 0s;
   }
 }

package/content/accordion/Accordion.sty.js

@@ -31,11 +31,11 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Accordion_css_ts_vanilla = require("./Accordion.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var accordionContentCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zc70k8-3-13-2", variantClassNames: { size: { "default": "_12zc70k9-3-13-2", condensed: "_12zc70ka-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
-var accordionContentWrapperCSS = "_12zc70k7-3-13-2";
-var accordionDividerMarginCSS = { "default": "_12zc70k1-3-13-2", condensed: "_12zc70k2-3-13-2" };
-var accordionLabelCSS = "_12zc70k0-3-13-2";
-var accordionTriggerIconCSS = "_12zc70k3-3-13-2";
-var accordionTriggerIconEndCSS = "_12zc70k5-3-13-2";
-var accordionTriggerIconExpandedCSS = "_12zc70k6-3-13-2";
-var accordionTriggerIconStartCSS = "_12zc70k4-3-13-2";
+var accordionContentCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zc70k8-3-14-0", variantClassNames: { size: { "default": "_12zc70k9-3-14-0", condensed: "_12zc70ka-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var accordionContentWrapperCSS = "_12zc70k7-3-14-0";
+var accordionDividerMarginCSS = { "default": "_12zc70k1-3-14-0", condensed: "_12zc70k2-3-14-0" };
+var accordionLabelCSS = "_12zc70k0-3-14-0";
+var accordionTriggerIconCSS = "_12zc70k3-3-14-0";
+var accordionTriggerIconEndCSS = "_12zc70k5-3-14-0";
+var accordionTriggerIconExpandedCSS = "_12zc70k6-3-14-0";
+var accordionTriggerIconStartCSS = "_12zc70k4-3-14-0";

package/content/accordion/AccordionSection.js

@@ -135,7 +135,7 @@ const AccordionSection = /* @__PURE__ */ (0, import_react.forwardRef)(
           {
             value: {
               labelId,
-              triggerId,
+              sectionAriaLabel: triggerAriaLabel,
               contentId,
               isExpanded,
               keepMounted,

package/content/accordion/AccordionSectionContent.js

@@ -57,9 +57,14 @@ const AccordionSectionContent = /* @__PURE__ */ (0, import_react.forwardRef)((pr
     style: consumerStyle,
     "data-testid": dataTestId
   } = props;
-  const { triggerId, contentId, isExpanded, keepMounted, size } = (0, import_react.useContext)(
-    import_AccordionSectionContext.AccordionSectionContext
-  );
+  const {
+    labelId,
+    sectionAriaLabel,
+    contentId,
+    isExpanded,
+    keepMounted,
+    size
+  } = (0, import_react.useContext)(import_AccordionSectionContext.AccordionSectionContext);
   const childIsText = (0, import_can_receive_default_text_format.canReceiveDefaultTextFormat)(children);
   const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
   const shouldReduceMotion = (0, import_framer_motion.useReducedMotion)();
@@ -100,7 +105,8 @@ const AccordionSectionContent = /* @__PURE__ */ (0, import_react.forwardRef)((pr
           ref: forwardedRef,
           id: contentId,
           role: "region",
-          "aria-labelledby": triggerId,
+          "aria-label": sectionAriaLabel,
+          "aria-labelledby": sectionAriaLabel ? void 0 : labelId,
           children: childIsText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "base", as: "p", children }) : children
         }
       )

package/content/accordion/contexts/AccordionSectionContext.d.ts

@@ -2,7 +2,7 @@ import { type Context } from 'react';
 /** @internal */
 type AccordionSectionContextProps = {
     labelId: string;
-    triggerId: string;
+    sectionAriaLabel: string | undefined;
     contentId: string;
     isExpanded: boolean;
     keepMounted: boolean;

package/content/accordion/contexts/AccordionSectionContext.js

@@ -23,7 +23,7 @@ module.exports = __toCommonJS(AccordionSectionContext_exports);
 var import_react = require("react");
 const AccordionSectionContext = (0, import_react.createContext)({
   labelId: "",
-  triggerId: "",
+  sectionAriaLabel: void 0,
   contentId: "",
   isExpanded: false,
   keepMounted: false,

package/content/ai-loading-indicator/AiLoadingIndicator.css

@@ -1,4 +1,4 @@
-@keyframes _1te6oqj4-3-13-2 {
+@keyframes _1te6oqj4-3-14-0 {
   0% {
     background-position: 20% 0%;
   }
@@ -6,27 +6,27 @@
     background-position: -120% 100%;
   }
 }
-._1te6oqj5-3-13-2 {
-  --_1te6oqj0-3-13-2: #CB53F6;
-  --_1te6oqj1-3-13-2: #7FF8F9;
-  --_1te6oqj2-3-13-2: 15%;
-  --_1te6oqj3-3-13-2: 5%;
+._1te6oqj5-3-14-0 {
+  --_1te6oqj0-3-14-0: #CB53F6;
+  --_1te6oqj1-3-14-0: #7FF8F9;
+  --_1te6oqj2-3-14-0: 15%;
+  --_1te6oqj3-3-14-0: 5%;
   position: relative;
-  background-image: linear-gradient(90deg, transparent 0%, transparent 5%, var(--dt-colors-text-neutral-default, #2f2f4f) 10%, var(--dt-colors-text-neutral-default, #2f2f4f) 90%, transparent 95%, transparent 100%), linear-gradient(var(--_1te6oqj0-3-13-2) 0%, var(--_1te6oqj1-3-13-2) 100%);
+  background-image: linear-gradient(90deg, transparent 0%, transparent 5%, var(--dt-colors-text-neutral-default, #2f2f4f) 10%, var(--dt-colors-text-neutral-default, #2f2f4f) 90%, transparent 95%, transparent 100%), linear-gradient(var(--_1te6oqj0-3-14-0) 0%, var(--_1te6oqj1-3-14-0) 100%);
   background-size: 200% 600%;
   background-position: 0% 0%;
   background-clip: text;
   color: transparent;
-  animation-name: _1te6oqj4-3-13-2;
+  animation-name: _1te6oqj4-3-14-0;
   animation-duration: var(--dt-timings-slowest-gentle, 1500ms);
   animation-iteration-count: infinite;
   animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1te6oqj6-3-13-2 {
+._1te6oqj6-3-14-0 {
   padding-top: calc(var(--dt-spacings-size-20, 20px) / 2 - 0.5lh);
   min-width: 0;
 }
-._1te6oqj7-3-13-2 {
+._1te6oqj7-3-14-0 {
   width: var(--dt-spacings-size-20, 20px);
   min-height: 1lh;
   display: flex;
@@ -34,14 +34,21 @@
   align-items: center;
   flex-shrink: 0;
 }
-._1te6oqj7-3-13-2 svg {
+._1te6oqj7-3-14-0 svg {
   display: block;
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._1te6oqj8-3-13-2 {
+._1te6oqj8-3-14-0 {
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
   min-width: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  ._1te6oqj5-3-14-0 {
+    animation: none;
+    background-image: none;
+    color: inherit;
+  }
 }

package/content/ai-loading-indicator/AiLoadingIndicator.js

@@ -32,7 +32,6 @@ __export(AiLoadingIndicator_exports, {
 module.exports = __toCommonJS(AiLoadingIndicator_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = require("clsx");
-var import_framer_motion = require("framer-motion");
 var import_react = require("react");
 var styles = __toESM(require("./AiLoadingIndicator.sty.js"));
 var import_AiLoadingIndicatorIcon = require("./AiLoadingIndicatorIcon.js");
@@ -63,7 +62,6 @@ const InternalAiLoadingIndicator = (0, import_react.forwardRef)((props, forwarde
   const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
   const { "aria-labelledby": ariaLabelledBy, ...remainingAriaLabelingProps } = ariaLabelingProps;
   const labelId = (0, import_useId.useId)();
-  const shouldReduceMotion = (0, import_framer_motion.useReducedMotion)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Flex.Flex,
     {
@@ -85,17 +83,7 @@ const InternalAiLoadingIndicator = (0, import_react.forwardRef)((props, forwarde
       "data-dt-component": COMPONENT_NAME,
       children: [
         slots.icon,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            id: labelId,
-            className: (0, import_clsx.clsx)(
-              styles.label,
-              !shouldReduceMotion && styles.labelAnimation
-            ),
-            children: label
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: labelId, className: (0, import_clsx.clsx)(styles.label, styles.labelAnimation), children: label })
       ]
     }
   );

package/content/ai-loading-indicator/AiLoadingIndicator.sty.js

@@ -24,7 +24,7 @@ __export(AiLoadingIndicator_css_exports, {
 });
 module.exports = __toCommonJS(AiLoadingIndicator_css_exports);
 var import_AiLoadingIndicator_css_ts_vanilla = require("./AiLoadingIndicator.css");
-var container = "_1te6oqj8-3-13-2";
-var iconWrapper = "_1te6oqj7-3-13-2";
-var label = "_1te6oqj6-3-13-2";
-var labelAnimation = "_1te6oqj5-3-13-2";
+var container = "_1te6oqj8-3-14-0";
+var iconWrapper = "_1te6oqj7-3-14-0";
+var label = "_1te6oqj6-3-14-0";
+var labelAnimation = "_1te6oqj5-3-14-0";

package/content/ai-response/AiResponse.css

@@ -6,20 +6,20 @@
     opacity: 1;
   }
 }
-._jdyvf80-3-13-2 {
+._jdyvf80-3-14-0 {
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._jdyvf80-3-13-2 [data-sd-animate]:not(table [data-sd-animate]) {
+._jdyvf80-3-14-0 [data-sd-animate]:not(table [data-sd-animate]) {
   animation: var(--sd-animation, sd-aiResponseAnimation) var(--sd-duration, 200ms) var(--sd-easing, ease) both;
 }
-._jdyvf80-3-13-2 ._17pa72a1-3-13-2 {
+._jdyvf80-3-14-0 ._17pa72a1-3-14-0 {
   margin-bottom: calc(var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px));
   margin-top: calc(var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px));
 }
-._jdyvf81-3-13-2 > :first-child {
+._jdyvf81-3-14-0 > :first-child {
   margin-top: 0;
 }
-._jdyvf81-3-13-2 > :last-child {
+._jdyvf81-3-14-0 > :last-child {
   margin-bottom: 0;
 }

package/content/ai-response/AiResponse.d.ts

@@ -1,3 +1,5 @@
+import { type ComponentType } from 'react';
+import type { AiResponseCodeBlockProps } from './ai-response-types.js';
 import type { AriaLabelingProps } from '../../core/types/a11y-props.js';
 import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../core/types/data-props.js';
@@ -13,6 +15,15 @@ export interface AiResponseProps extends DataTestId, StylingProps, MaskingProps,
      * The content to be displayed as markdown.
      */
     children: string;
+    /**
+     * A map of fenced code block languages to components that render the content of such a
+     * block instead of the default code snippet. A fenced block opened with the language
+     * `dt-visualization` is handed to the renderer registered under `'dt-visualization'`;
+     * blocks with any other language and inline code keep their default rendering.
+     * Provide a stable reference, for example by wrapping the map in `useMemo`.
+     * @defaultValue undefined
+     */
+    customCodeBlockRenderers?: Record<string, ComponentType<AiResponseCodeBlockProps>>;
     /**
      * Callback that is called whenever the animation state changes.
      */

package/content/ai-response/AiResponse.js

@@ -37,6 +37,7 @@ var import_react = require("react");
 var import_streamdown = require("streamdown");
 var styles = __toESM(require("./AiResponse.sty.js"));
 var import_useTextAnimation = require("./hooks/useTextAnimation.js");
+var import_AiResponseBlock = require("./utils/AiResponseBlock.js");
 var import_component_mappings = require("./utils/component-mappings.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
@@ -52,6 +53,7 @@ const InternalAiResponse = (0, import_react.forwardRef)(
   (props, forwardedRef) => {
     const {
       children,
+      customCodeBlockRenderers,
       onAnimationStateChange,
       responseState = "streaming",
       className: consumerClassName,
@@ -64,6 +66,10 @@ const InternalAiResponse = (0, import_react.forwardRef)(
     const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
     const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
     const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(restProps, ariaLabelingProps);
+    const components = (0, import_react.useMemo)(
+      () => (0, import_component_mappings.getStreamdownComponents)(customCodeBlockRenderers),
+      [customCodeBlockRenderers]
+    );
     const shouldReduceMotion = (0, import_framer_motion.useReducedMotion)() ?? false;
     const { displayedText, isTextAnimating } = (0, import_useTextAnimation.useTextAnimation)(
       children,
@@ -94,7 +100,8 @@ const InternalAiResponse = (0, import_react.forwardRef)(
           {
             animated: shouldReduceMotion ? false : animationOptions,
             isAnimating: responseState === "streaming" || isTextAnimating,
-            components: import_component_mappings.streamdownComponents,
+            components,
+            BlockComponent: import_AiResponseBlock.AiResponseBlock,
             className: styles.streamdown,
             children: displayedText
           }

package/content/ai-response/AiResponse.sty.js

@@ -25,5 +25,5 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_CodeHighlight_css_ts_vanilla = require("../code-snippet/CodeHighlight.css");
 var import_CodeSnippet_css_ts_vanilla = require("../code-snippet/CodeSnippet.css");
 var import_AiResponse_css_ts_vanilla = require("./AiResponse.css");
-var streamdown = "_jdyvf81-3-13-2";
-var wrapper = "_jdyvf80-3-13-2";
+var streamdown = "_jdyvf81-3-14-0";
+var wrapper = "_jdyvf80-3-14-0";

package/content/ai-response/AiResponseBlockContext.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The streaming state of a single markdown block within an `AiResponse`.
+ * @internal
+ */
+export interface AiResponseBlockState {
+    /**
+     * Whether the markdown block has been fully received. It is `false` while the block
+     * ends inside a code fence whose closing fence is still missing.
+     */
+    isComplete: boolean;
+}
+export declare const AiResponseBlockContext: import("react").Context<AiResponseBlockState>;
+/**
+ * Returns the streaming state of the markdown block the calling component is rendered in.
+ * @internal
+ */
+export declare const useAiResponseBlock: () => AiResponseBlockState;
+//# sourceMappingURL=AiResponseBlockContext.d.ts.map

package/content/ai-response/AiResponseBlockContext.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AiResponseBlockContext_exports = {};
+__export(AiResponseBlockContext_exports, {
+  AiResponseBlockContext: () => AiResponseBlockContext,
+  useAiResponseBlock: () => useAiResponseBlock
+});
+module.exports = __toCommonJS(AiResponseBlockContext_exports);
+var import_react = require("react");
+const AiResponseBlockContext = (0, import_react.createContext)({
+  isComplete: true
+});
+const useAiResponseBlock = () => (0, import_react.useContext)(AiResponseBlockContext);

package/content/ai-response/ai-response-types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Props a custom code block renderer receives.
+ * @public
+ */
+export interface AiResponseCodeBlockProps {
+    /**
+     * The content of the code block, without the surrounding fences. While the response is
+     * streaming, this is the part of the content that has been received so far.
+     */
+    code: string;
+    /**
+     * Whether the closing fence of the code block has been received. Content is revealed
+     * word by word, so a code block is rendered long before its content is complete. Use
+     * this to show a placeholder until the content can be processed.
+     */
+    isComplete: boolean;
+    /**
+     * The language of the fenced code block, e.g. `'dt-visualization'` for a block opened
+     * with a `dt-visualization` fence.
+     */
+    language: string;
+}
+//# sourceMappingURL=ai-response-types.d.ts.map

package/content/ai-response/ai-response-types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ai_response_types_exports = {};
+module.exports = __toCommonJS(ai_response_types_exports);

package/content/ai-response/utils/AiResponseBlock.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentProps } from 'react';
+import { Block } from 'streamdown';
+/**
+ * Wraps a Streamdown block to provide its streaming state to the components rendered
+ * within it. It is memoized because it replaces Streamdown's own memoized block, which
+ * keeps unchanged blocks from re-rendering on every streamed token.
+ * @internal
+ */
+export declare const AiResponseBlock: import("react").MemoExoticComponent<(props: ComponentProps<typeof Block>) => import("react").JSX.Element>;
+//# sourceMappingURL=AiResponseBlock.d.ts.map

package/content/ai-response/utils/AiResponseBlock.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AiResponseBlock_exports = {};
+__export(AiResponseBlock_exports, {
+  AiResponseBlock: () => AiResponseBlock
+});
+module.exports = __toCommonJS(AiResponseBlock_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_streamdown = require("streamdown");
+var import_fence_utils = require("./fence-utils.js");
+var import_AiResponseBlockContext = require("../AiResponseBlockContext.js");
+const AiResponseBlock = (0, import_react.memo)((props) => {
+  const { content } = props;
+  const blockState = (0, import_react.useMemo)(
+    () => ({ isComplete: !(0, import_fence_utils.hasUnterminatedFence)(content) }),
+    [content]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AiResponseBlockContext.AiResponseBlockContext.Provider, { value: blockState, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_streamdown.Block, { ...props }) });
+});

package/content/ai-response/utils/component-mappings.d.ts

@@ -1,10 +1,16 @@
+import type { ComponentType } from 'react';
 import type { StreamdownProps } from 'streamdown';
+import type { AiResponseCodeBlockProps } from '../ai-response-types.js';
 /** Streamdown's component map type */
 type StreamdownComponents = NonNullable<StreamdownProps['components']>;
+type CodeBlockRenderers = Record<string, ComponentType<AiResponseCodeBlockProps>>;
 /**
- * Custom component mapping for Streamdown that extends the markdown mappings we have for react-markdown
- * with a code component that distinguishes between inline and block code and returns the appropriate type.
+ * Builds the component mapping for Streamdown. It starts from the markdown mappings we
+ * have for react-markdown and wraps the code component so that it receives whether the
+ * code is inline or a block, and so that a fenced block whose language a consumer
+ * registered a renderer for is handed over to that renderer.
+ * @internal
  */
-export declare const streamdownComponents: StreamdownComponents;
+export declare const getStreamdownComponents: (customCodeBlockRenderers?: CodeBlockRenderers) => StreamdownComponents;
 export {};
 //# sourceMappingURL=component-mappings.d.ts.map

package/content/ai-response/utils/component-mappings.js

@@ -17,18 +17,55 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var component_mappings_exports = {};
 __export(component_mappings_exports, {
-  streamdownComponents: () => streamdownComponents
+  getStreamdownComponents: () => getStreamdownComponents
 });
 module.exports = __toCommonJS(component_mappings_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_Markdown = require("../../markdown/Markdown.js");
-const streamdownComponents = {
-  ...import_Markdown.componentMappings,
-  code: ({ children, node, ...restProps }) => {
-    const isInline = node?.position?.start?.line === node?.position?.end?.line;
-    const MarkdownCode = import_Markdown.componentMappings.code;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownCode, { inline: isInline, ...restProps, children });
-  }
-  // The markdownComponentMappings are typed for react-markdown, but they're compatible with
-  // Streamdown so we can cast them here to avoid unnecessary duplication of the mapping logic.
+var import_AiResponseBlockContext = require("../AiResponseBlockContext.js");
+const FENCE_LANGUAGE_PREFIX = "language-";
+const DefaultCode = import_Markdown.componentMappings.code;
+const getFenceLanguage = (className) => typeof className === "string" && className.includes(FENCE_LANGUAGE_PREFIX) ? className.slice(
+  className.indexOf(FENCE_LANGUAGE_PREFIX) + FENCE_LANGUAGE_PREFIX.length
+) : void 0;
+const toCode = (children) => (Array.isArray(children) ? children.join("") : String(children ?? "")).replace(/\n$/, "");
+const CustomCodeBlock = ({
+  Renderer,
+  language,
+  children
+}) => {
+  const { isComplete } = (0, import_AiResponseBlockContext.useAiResponseBlock)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Renderer,
+    {
+      code: toCode(children),
+      language,
+      isComplete
+    }
+  );
+};
+const buildStreamdownComponents = (customCodeBlockRenderers) => {
+  const renderers = Object.assign(
+    /* @__PURE__ */ Object.create(null),
+    customCodeBlockRenderers
+  );
+  return {
+    ...import_Markdown.componentMappings,
+    code: ({ children, node, ...restProps }) => {
+      const isSingleLine = node?.position?.start !== void 0 && node.position.end !== void 0 && node.position.start.line === node.position.end.line;
+      const language = getFenceLanguage(restProps.className);
+      const isInline = isSingleLine && language === void 0;
+      if (language !== void 0) {
+        const Renderer = renderers[language];
+        if (Renderer) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomCodeBlock, { Renderer, language, children });
+        }
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultCode, { inline: isInline, node, ...restProps, children });
+    }
+    // The markdownComponentMappings are typed for react-markdown, but they're compatible with
+    // Streamdown so we can cast them here to avoid unnecessary duplication of the mapping logic.
+  };
 };
+const defaultStreamdownComponents = buildStreamdownComponents();
+const getStreamdownComponents = (customCodeBlockRenderers) => customCodeBlockRenderers ? buildStreamdownComponents(customCodeBlockRenderers) : defaultStreamdownComponents;

package/content/ai-response/utils/fence-utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Determines whether the markdown ends inside a fenced code block whose closing fence has
+ * not been received yet. While a response is streaming, an unterminated fence is still
+ * parsed as a complete code block, so this is the only way to tell a finished block apart
+ * from a block that is still being written.
+ * @internal
+ */
+export declare const hasUnterminatedFence: (markdown: string) => boolean;
+//# sourceMappingURL=fence-utils.d.ts.map