@djangocfg/ui-tools 2.1.94 → 2.1.96

package/dist/index.d.cts

@@ -1567,6 +1567,43 @@ interface MarkdownMessageProps {
     isUser?: boolean;
     /** Use compact size (text-xs instead of text-sm) */
     isCompact?: boolean;
+    /**
+     * Enable collapsible "Read more..." functionality
+     * When enabled, long content will be truncated with a toggle button
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Maximum character length before showing "Read more..."
+     * Only applies when collapsible is true
+     * If both maxLength and maxLines are set, the stricter limit applies
+     */
+    maxLength?: number;
+    /**
+     * Maximum number of lines before showing "Read more..."
+     * Only applies when collapsible is true
+     * If both maxLength and maxLines are set, the stricter limit applies
+     */
+    maxLines?: number;
+    /**
+     * Custom "Read more" button text
+     * @default "Read more..."
+     */
+    readMoreLabel?: string;
+    /**
+     * Custom "Show less" button text
+     * @default "Show less"
+     */
+    showLessLabel?: string;
+    /**
+     * Start expanded (only applies when collapsible is true)
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Callback when collapsed state changes
+     */
+    onCollapseChange?: (isCollapsed: boolean) => void;
 }
 /**
  * MarkdownMessage - Renders markdown content with syntax highlighting and GFM support
@@ -1578,6 +1615,7 @@ interface MarkdownMessageProps {
  * - Tables, lists, blockquotes
  * - User/assistant styling modes
  * - Plain text optimization (skips ReactMarkdown for simple text)
+ * - Collapsible "Read more..." for long messages
  *
  * @example
  * ```tsx
@@ -1585,8 +1623,72 @@ interface MarkdownMessageProps {
  *
  * // User message styling
  * <MarkdownMessage content="Some content" isUser />
+ *
+ * // Collapsible long content (for chat apps)
+ * <MarkdownMessage
+ *   content={longText}
+ *   collapsible
+ *   maxLength={300}
+ *   maxLines={5}
+ * />
  * ```
  */
 declare const MarkdownMessage: React__default.FC<MarkdownMessageProps>;
 
-export { ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CheckboxWidget, ColorWidget, type CreateVideoErrorFallbackOptions, type DASHSource, type DataUrlSource, EFFECT_ANIMATIONS, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, MarkdownMessage, type MarkdownMessageProps, Mermaid, MeshEffect, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps, PrettyCode, type ResolveFileSourceOptions, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, type UrlSource, type UseAudioVisualizationReturn, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type YouTubeSource, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, isSimpleStreamSource, mergeDefaults, normalizeFormData, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLottie, useMediaCacheStore, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
+interface UseCollapsibleContentOptions {
+    /**
+     * Maximum character length before collapsing
+     * If both maxLength and maxLines are set, the stricter limit applies
+     */
+    maxLength?: number;
+    /**
+     * Maximum number of lines before collapsing
+     * If both maxLength and maxLines are set, the stricter limit applies
+     */
+    maxLines?: number;
+    /**
+     * Start in expanded state (default: false - starts collapsed)
+     */
+    defaultExpanded?: boolean;
+}
+interface UseCollapsibleContentResult {
+    /** Whether content is currently collapsed */
+    isCollapsed: boolean;
+    /** Toggle between collapsed/expanded state */
+    toggleCollapsed: () => void;
+    /** Set collapsed state directly */
+    setCollapsed: (collapsed: boolean) => void;
+    /** Content to display (truncated if collapsed, full if expanded) */
+    displayContent: string;
+    /** Whether the content exceeds limits and should be collapsible */
+    shouldCollapse: boolean;
+    /** Original content length */
+    originalLength: number;
+    /** Original line count */
+    originalLineCount: number;
+}
+/**
+ * Hook for managing collapsible content with "Read more..." functionality
+ *
+ * @example
+ * ```tsx
+ * const { isCollapsed, toggleCollapsed, displayContent, shouldCollapse } = useCollapsibleContent(
+ *   longText,
+ *   { maxLength: 300, maxLines: 5 }
+ * );
+ *
+ * return (
+ *   <div>
+ *     <Markdown content={displayContent} />
+ *     {shouldCollapse && (
+ *       <button onClick={toggleCollapsed}>
+ *         {isCollapsed ? 'Read more...' : 'Show less'}
+ *       </button>
+ *     )}
+ *   </div>
+ * );
+ * ```
+ */
+declare function useCollapsibleContent(content: string, options?: UseCollapsibleContentOptions): UseCollapsibleContentResult;
+
+export { ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CheckboxWidget, ColorWidget, type CreateVideoErrorFallbackOptions, type DASHSource, type DataUrlSource, EFFECT_ANIMATIONS, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, MarkdownMessage, type MarkdownMessageProps, Mermaid, MeshEffect, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps, PrettyCode, type ResolveFileSourceOptions, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, type UrlSource, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type YouTubeSource, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, isSimpleStreamSource, mergeDefaults, normalizeFormData, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLottie, useMediaCacheStore, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };

package/dist/index.d.ts

@@ -1567,6 +1567,43 @@ interface MarkdownMessageProps {
     isUser?: boolean;
     /** Use compact size (text-xs instead of text-sm) */
     isCompact?: boolean;
+    /**
+     * Enable collapsible "Read more..." functionality
+     * When enabled, long content will be truncated with a toggle button
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Maximum character length before showing "Read more..."
+     * Only applies when collapsible is true
+     * If both maxLength and maxLines are set, the stricter limit applies
+     */
+    maxLength?: number;
+    /**
+     * Maximum number of lines before showing "Read more..."
+     * Only applies when collapsible is true
+     * If both maxLength and maxLines are set, the stricter limit applies
+     */
+    maxLines?: number;
+    /**
+     * Custom "Read more" button text
+     * @default "Read more..."
+     */
+    readMoreLabel?: string;
+    /**
+     * Custom "Show less" button text
+     * @default "Show less"
+     */
+    showLessLabel?: string;
+    /**
+     * Start expanded (only applies when collapsible is true)
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Callback when collapsed state changes
+     */
+    onCollapseChange?: (isCollapsed: boolean) => void;
 }
 /**
  * MarkdownMessage - Renders markdown content with syntax highlighting and GFM support
@@ -1578,6 +1615,7 @@ interface MarkdownMessageProps {
  * - Tables, lists, blockquotes
  * - User/assistant styling modes
  * - Plain text optimization (skips ReactMarkdown for simple text)
+ * - Collapsible "Read more..." for long messages
  *
  * @example
  * ```tsx
@@ -1585,8 +1623,72 @@ interface MarkdownMessageProps {
  *
  * // User message styling
  * <MarkdownMessage content="Some content" isUser />
+ *
+ * // Collapsible long content (for chat apps)
+ * <MarkdownMessage
+ *   content={longText}
+ *   collapsible
+ *   maxLength={300}
+ *   maxLines={5}
+ * />
  * ```
  */
 declare const MarkdownMessage: React__default.FC<MarkdownMessageProps>;
 
-export { ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CheckboxWidget, ColorWidget, type CreateVideoErrorFallbackOptions, type DASHSource, type DataUrlSource, EFFECT_ANIMATIONS, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, MarkdownMessage, type MarkdownMessageProps, Mermaid, MeshEffect, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps, PrettyCode, type ResolveFileSourceOptions, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, type UrlSource, type UseAudioVisualizationReturn, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type YouTubeSource, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, isSimpleStreamSource, mergeDefaults, normalizeFormData, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLottie, useMediaCacheStore, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
+interface UseCollapsibleContentOptions {
+    /**
+     * Maximum character length before collapsing
+     * If both maxLength and maxLines are set, the stricter limit applies
+     */
+    maxLength?: number;
+    /**
+     * Maximum number of lines before collapsing
+     * If both maxLength and maxLines are set, the stricter limit applies
+     */
+    maxLines?: number;
+    /**
+     * Start in expanded state (default: false - starts collapsed)
+     */
+    defaultExpanded?: boolean;
+}
+interface UseCollapsibleContentResult {
+    /** Whether content is currently collapsed */
+    isCollapsed: boolean;
+    /** Toggle between collapsed/expanded state */
+    toggleCollapsed: () => void;
+    /** Set collapsed state directly */
+    setCollapsed: (collapsed: boolean) => void;
+    /** Content to display (truncated if collapsed, full if expanded) */
+    displayContent: string;
+    /** Whether the content exceeds limits and should be collapsible */
+    shouldCollapse: boolean;
+    /** Original content length */
+    originalLength: number;
+    /** Original line count */
+    originalLineCount: number;
+}
+/**
+ * Hook for managing collapsible content with "Read more..." functionality
+ *
+ * @example
+ * ```tsx
+ * const { isCollapsed, toggleCollapsed, displayContent, shouldCollapse } = useCollapsibleContent(
+ *   longText,
+ *   { maxLength: 300, maxLines: 5 }
+ * );
+ *
+ * return (
+ *   <div>
+ *     <Markdown content={displayContent} />
+ *     {shouldCollapse && (
+ *       <button onClick={toggleCollapsed}>
+ *         {isCollapsed ? 'Read more...' : 'Show less'}
+ *       </button>
+ *     )}
+ *   </div>
+ * );
+ * ```
+ */
+declare function useCollapsibleContent(content: string, options?: UseCollapsibleContentOptions): UseCollapsibleContentResult;
+
+export { ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CheckboxWidget, ColorWidget, type CreateVideoErrorFallbackOptions, type DASHSource, type DataUrlSource, EFFECT_ANIMATIONS, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, MarkdownMessage, type MarkdownMessageProps, Mermaid, MeshEffect, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps, PrettyCode, type ResolveFileSourceOptions, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, type UrlSource, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type YouTubeSource, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, isSimpleStreamSource, mergeDefaults, normalizeFormData, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLottie, useMediaCacheStore, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };

package/dist/index.mjs

@@ -4753,6 +4753,121 @@ function ImageViewer({ file, content, src: directSrc, inDialog = false }) {
   );
 }
 __name(ImageViewer, "ImageViewer");
+function smartTruncate(content, maxLength) {
+  if (content.length <= maxLength) {
+    return content;
+  }
+  let breakPoint = maxLength;
+  while (breakPoint > maxLength - 50 && breakPoint > 0) {
+    const char = content[breakPoint];
+    if (char === " " || char === "\n" || char === "	") {
+      break;
+    }
+    breakPoint--;
+  }
+  if (breakPoint <= maxLength - 50) {
+    breakPoint = maxLength;
+  }
+  let truncated = content.slice(0, breakPoint).trimEnd();
+  truncated = fixUnclosedMarkdown(truncated);
+  return truncated;
+}
+__name(smartTruncate, "smartTruncate");
+function truncateByLines(content, maxLines) {
+  const lines = content.split("\n");
+  if (lines.length <= maxLines) {
+    return content;
+  }
+  let truncated = lines.slice(0, maxLines).join("\n").trimEnd();
+  truncated = fixUnclosedMarkdown(truncated);
+  return truncated;
+}
+__name(truncateByLines, "truncateByLines");
+function fixUnclosedMarkdown(content) {
+  let result = content;
+  const countOccurrences = /* @__PURE__ */ __name((str, marker) => {
+    const escaped = marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const matches = str.match(new RegExp(escaped, "g"));
+    return matches ? matches.length : 0;
+  }, "countOccurrences");
+  const boldCount = countOccurrences(result, "**");
+  if (boldCount % 2 !== 0) {
+    result += "**";
+  }
+  const withoutBold = result.replace(/\*\*/g, "");
+  const italicCount = countOccurrences(withoutBold, "*");
+  if (italicCount % 2 !== 0) {
+    result += "*";
+  }
+  const codeCount = countOccurrences(result, "`");
+  const tripleCount = countOccurrences(result, "```");
+  const singleCodeCount = codeCount - tripleCount * 3;
+  if (singleCodeCount % 2 !== 0) {
+    result += "`";
+  }
+  if (tripleCount % 2 !== 0) {
+    result += "\n```";
+  }
+  const strikeCount = countOccurrences(result, "~~");
+  if (strikeCount % 2 !== 0) {
+    result += "~~";
+  }
+  const underlineBoldCount = countOccurrences(result, "__");
+  if (underlineBoldCount % 2 !== 0) {
+    result += "__";
+  }
+  const withoutUnderlineBold = result.replace(/__/g, "");
+  const underlineItalicCount = countOccurrences(withoutUnderlineBold, "_");
+  if (underlineItalicCount % 2 !== 0) {
+    result += "_";
+  }
+  return result;
+}
+__name(fixUnclosedMarkdown, "fixUnclosedMarkdown");
+function useCollapsibleContent(content, options = {}) {
+  const { maxLength, maxLines, defaultExpanded = false } = options;
+  const [isCollapsed, setIsCollapsed] = useState(!defaultExpanded);
+  const originalLength = content.length;
+  const originalLineCount = content.split("\n").length;
+  const { shouldCollapse, truncatedContent } = useMemo(() => {
+    if (maxLength === void 0 && maxLines === void 0) {
+      return { shouldCollapse: false, truncatedContent: content };
+    }
+    let needsCollapse = false;
+    let result = content;
+    if (maxLines !== void 0 && originalLineCount > maxLines) {
+      needsCollapse = true;
+      result = truncateByLines(result, maxLines);
+    }
+    if (maxLength !== void 0 && result.length > maxLength) {
+      needsCollapse = true;
+      result = smartTruncate(result, maxLength);
+    }
+    return { shouldCollapse: needsCollapse, truncatedContent: result };
+  }, [content, maxLength, maxLines, originalLineCount]);
+  const displayContent = useMemo(() => {
+    if (!shouldCollapse || !isCollapsed) {
+      return content;
+    }
+    return truncatedContent;
+  }, [content, truncatedContent, shouldCollapse, isCollapsed]);
+  const toggleCollapsed = useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+  const setCollapsed = useCallback((collapsed) => {
+    setIsCollapsed(collapsed);
+  }, []);
+  return {
+    isCollapsed,
+    toggleCollapsed,
+    setCollapsed,
+    displayContent,
+    shouldCollapse,
+    originalLength,
+    originalLineCount
+  };
+}
+__name(useCollapsibleContent, "useCollapsibleContent");
 var extractTextFromChildren = /* @__PURE__ */ __name((children) => {
   if (typeof children === "string") {
     return children;
@@ -4937,48 +5052,168 @@ var hasMarkdownSyntax = /* @__PURE__ */ __name((text) => {
   ];
   return markdownPatterns.some((pattern) => pattern.test(text));
 }, "hasMarkdownSyntax");
+var CollapseToggle = /* @__PURE__ */ __name(({
+  isCollapsed,
+  onClick,
+  readMoreLabel,
+  showLessLabel,
+  isUser,
+  isCompact
+}) => {
+  const textSize = isCompact ? "text-xs" : "text-sm";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `
+        ${textSize} font-medium cursor-pointer
+        transition-colors duration-200
+        ${isUser ? "text-white/80 hover:text-white" : "text-primary hover:text-primary/80"}
+        inline-flex items-center gap-1
+        mt-1
+      `,
+      children: isCollapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        readMoreLabel,
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-3 h-3",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M19 9l-7 7-7-7"
+              }
+            )
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        showLessLabel,
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-3 h-3",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M5 15l7-7 7 7"
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}, "CollapseToggle");
 var MarkdownMessage = /* @__PURE__ */ __name(({
   content,
   className = "",
   isUser = false,
-  isCompact = false
+  isCompact = false,
+  collapsible = false,
+  maxLength,
+  maxLines,
+  readMoreLabel = "Read more...",
+  showLessLabel = "Show less",
+  defaultExpanded = false,
+  onCollapseChange
 }) => {
   const trimmedContent = content.trim();
+  const collapsibleOptions = React17.useMemo(() => {
+    if (!collapsible) return {};
+    const effectiveMaxLength = maxLength ?? 1e3;
+    const effectiveMaxLines = maxLines ?? 10;
+    return { maxLength: effectiveMaxLength, maxLines: effectiveMaxLines, defaultExpanded };
+  }, [collapsible, maxLength, maxLines, defaultExpanded]);
+  const {
+    isCollapsed,
+    toggleCollapsed,
+    displayContent,
+    shouldCollapse
+  } = useCollapsibleContent(
+    trimmedContent,
+    collapsible ? collapsibleOptions : {}
+  );
+  React17.useEffect(() => {
+    if (collapsible && shouldCollapse && onCollapseChange) {
+      onCollapseChange(isCollapsed);
+    }
+  }, [isCollapsed, collapsible, shouldCollapse, onCollapseChange]);
   const components = React17.useMemo(() => createMarkdownComponents(isUser, isCompact), [isUser, isCompact]);
   const textSizeClass = isCompact ? "text-xs" : "text-sm";
   const proseClass = isCompact ? "prose-xs" : "prose-sm";
-  const isPlainText = !hasMarkdownSyntax(trimmedContent);
+  const isPlainText = !hasMarkdownSyntax(displayContent);
   if (isPlainText) {
-    return /* @__PURE__ */ jsx("span", { className: `${textSizeClass} leading-relaxed break-words ${className}`, children: trimmedContent });
+    return /* @__PURE__ */ jsxs("span", { className: `${textSizeClass} leading-relaxed break-words ${className}`, children: [
+      displayContent,
+      collapsible && shouldCollapse && /* @__PURE__ */ jsxs(Fragment, { children: [
+        isCollapsed && "... ",
+        /* @__PURE__ */ jsx(
+          CollapseToggle,
+          {
+            isCollapsed,
+            onClick: toggleCollapsed,
+            readMoreLabel,
+            showLessLabel,
+            isUser,
+            isCompact
+          }
+        )
+      ] })
+    ] });
   }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `
-        prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass}
-        ${isUser ? "prose-invert" : "dark:prose-invert"}
-        ${className}
-      `,
-      style: {
-        // Inherit colors from parent - fixes issues with external CSS variables
-        "--tw-prose-body": "inherit",
-        "--tw-prose-headings": "inherit",
-        "--tw-prose-bold": "inherit",
-        "--tw-prose-links": "inherit",
-        color: "inherit"
-      },
-      children: /* @__PURE__ */ jsx(
-        ReactMarkdown,
-        {
-          remarkPlugins: [remarkGfm],
-          components,
-          children: trimmedContent
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `
+          prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass}
+          ${isUser ? "prose-invert" : "dark:prose-invert"}
+        `,
+        style: {
+          // Inherit colors from parent - fixes issues with external CSS variables
+          "--tw-prose-body": "inherit",
+          "--tw-prose-headings": "inherit",
+          "--tw-prose-bold": "inherit",
+          "--tw-prose-links": "inherit",
+          color: "inherit"
+        },
+        children: /* @__PURE__ */ jsx(
+          ReactMarkdown,
+          {
+            remarkPlugins: [remarkGfm],
+            components,
+            children: displayContent
+          }
+        )
+      }
+    ),
+    collapsible && shouldCollapse && /* @__PURE__ */ jsx(
+      CollapseToggle,
+      {
+        isCollapsed,
+        onClick: toggleCollapsed,
+        readMoreLabel,
+        showLessLabel,
+        isUser,
+        isCompact
+      }
+    )
+  ] });
 }, "MarkdownMessage");
 
-export { ArrayFieldItemTemplate, ArrayFieldTemplate, AudioReactiveCover, BaseInputTemplate, COLOR_SCHEMES2 as COLOR_SCHEMES, COLOR_SCHEME_INFO, CheckboxWidget, ColorWidget, EFFECT_ANIMATIONS, ErrorListTemplate, FieldTemplate, GlowEffect, HybridAudioPlayer, HybridAudioProvider, HybridSimplePlayer, HybridWaveform, INTENSITY_CONFIG, INTENSITY_INFO, ImageViewer, JsonSchemaForm, LottiePlayer, MarkdownMessage, Mermaid_default as Mermaid, MeshEffect, NativeProvider, NumberWidget, ObjectFieldTemplate, OpenapiViewer_default as OpenapiViewer, OrbsEffect, SelectWidget, SliderWidget, SpotlightEffect, StreamProvider, SwitchWidget, TextWidget, VARIANT_INFO, VideoControls, VideoErrorFallback, VideoPlayer, VideoPlayerProvider, VidstackProvider, VisualizationProvider, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, isSimpleStreamSource, mergeDefaults, normalizeFormData, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useMediaCacheStore, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
+export { ArrayFieldItemTemplate, ArrayFieldTemplate, AudioReactiveCover, BaseInputTemplate, COLOR_SCHEMES2 as COLOR_SCHEMES, COLOR_SCHEME_INFO, CheckboxWidget, ColorWidget, EFFECT_ANIMATIONS, ErrorListTemplate, FieldTemplate, GlowEffect, HybridAudioPlayer, HybridAudioProvider, HybridSimplePlayer, HybridWaveform, INTENSITY_CONFIG, INTENSITY_INFO, ImageViewer, JsonSchemaForm, LottiePlayer, MarkdownMessage, Mermaid_default as Mermaid, MeshEffect, NativeProvider, NumberWidget, ObjectFieldTemplate, OpenapiViewer_default as OpenapiViewer, OrbsEffect, SelectWidget, SliderWidget, SpotlightEffect, StreamProvider, SwitchWidget, TextWidget, VARIANT_INFO, VideoControls, VideoErrorFallback, VideoPlayer, VideoPlayerProvider, VidstackProvider, VisualizationProvider, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, isSimpleStreamSource, mergeDefaults, normalizeFormData, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useMediaCacheStore, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map