@baishuyun/ai-design 2.1.0-alpha.4 → 2.1.3

package/src/components/memoized-markdown.tsx

@@ -1,32 +1,45 @@
-import { marked } from "marked";
-import { memo, useMemo } from "react";
-import ReactMarkdown from "react-markdown";
+import { marked } from 'marked';
+import { CSSProperties, memo, useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkBreaks from 'remark-breaks';
 
 function parseMarkdownIntoBlocks(markdown: string): string[] {
   const tokens = marked.lexer(markdown);
   return tokens.map((token) => token.raw);
 }
 
-const MemoizedMarkdownBlock = memo(
-  ({ content }: { content: string }) => {
-    return <ReactMarkdown>{content}</ReactMarkdown>;
-  },
-  (prevProps, nextProps) => {
-    if (prevProps.content !== nextProps.content) return false;
-    return true;
-  },
-);
+const MemoizedMarkdownBlock = memo(({ content, breaks }: { content: string; breaks?: boolean }) => {
+  return (
+    <ReactMarkdown remarkPlugins={breaks ? [remarkBreaks] : undefined}>{content}</ReactMarkdown>
+  );
+});
+
+MemoizedMarkdownBlock.displayName = 'MemoizedMarkdownBlock';
+
+type MarkdownProps = { content: string; id: string; breaks?: boolean };
 
-MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
+const Prose = memo(function Prose({
+  content,
+  id,
+  breaks,
+  style,
+}: MarkdownProps & { style?: CSSProperties }) {
+  const blocks = useMemo(() => parseMarkdownIntoBlocks(content), [content]);
 
-export const MemoizedMarkdown = memo(
-  ({ content, id }: { content: string; id: string }) => {
+  return blocks.map((block, index) => (
+    <article className="prose" key={`${id}-block_${index}`} style={style}>
+      <MemoizedMarkdownBlock breaks={breaks} content={block} />
+    </article>
+  ));
+});
+
+export const MemoizedMarkdown = Object.assign(
+  memo(function MemoizedMarkdown({ content, id, breaks }: MarkdownProps) {
     const blocks = useMemo(() => parseMarkdownIntoBlocks(content), [content]);
 
     return blocks.map((block, index) => (
-      <MemoizedMarkdownBlock content={block} key={`${id}-block_${index}`} />
+      <MemoizedMarkdownBlock breaks={breaks} content={block} key={`${id}-block_${index}`} />
     ));
-  },
+  }),
+  { Prose },
 );
-
-MemoizedMarkdown.displayName = "MemoizedMarkdown";

package/src/components/message-content.tsx

@@ -3,16 +3,20 @@ import { cn } from '../lib/utils';
 
 export type MessageContentProps = HTMLAttributes<HTMLDivElement> & {
   compact?: boolean;
+  /** 移动端消息内容文字 16px（PC 端 14px） */
+  isMobile?: boolean;
 };
 
-export const MessageContent = ({ children, className, ...props }: MessageContentProps) => (
+export const MessageContent = ({ children, className, isMobile, ...props }: MessageContentProps) => (
   <div
     className={cn(
-      'flex flex-col gap-2.5 overflow-hidden p-0 text-foreground text-[14px]',
+      'flex flex-col gap-2.5 overflow-hidden p-0 text-foreground',
       'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',
       'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',
       'is-user:dark overflow-visible',
-      className
+      className,
+      // 字号放在最后，保证 MessageContent 自身字号权威，外部 className 传入的 text-[*] 无法覆盖
+      isMobile ? 'text-[16px]' : 'text-[14px]'
     )}
     {...props}
   >

package/src/components/output-config-editor.tsx

@@ -1,10 +1,11 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import type { FieldType, IAgentHelperOutputConfig, OutputParam, IField, ISubformField } from '@baishuyun/types';
 import { cn } from '../lib/utils';
 import { transCls } from '../const/ui';
 import { TrashIcon, SearchIcon } from '../components/bs-icons';
 import { Popover, PopoverTrigger, PopoverContent } from './ui/popover';
 import { usePortalContainer } from '../hooks/use-portal-container';
+import { BsTooltip } from './tooltip';
 
 const PlusIcon = () => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -110,17 +111,16 @@ const VALID_TYPE_MAP: Partial<Record<FieldType, Set<FieldType>>> = {
   'image': new Set(['signature', 'image', 'upload']),
 }
 
-const EMPTY_SET = new Set();
+function isCompatibleType(sourceType?: FieldType | '', targetType?: FieldType | ''): boolean {
+  return !!sourceType && !!targetType && sourceType !== 'subform' && targetType !== 'subform' &&
+    (sourceType === targetType || !!VALID_TYPE_MAP[sourceType]?.has(targetType));
+}
 
-function filterFieldsByType(fields: OutputFieldOption[], targetType: FieldType | ''): OutputFieldOption[] {
+function filterFieldsByType(fields: OutputFieldOption[], sourceType?: FieldType | ''): OutputFieldOption[] {
   return fields.reduce<OutputFieldOption[]>((acc, f) => {
-    const selfMatches = f.type === targetType;
-    const validTypeSet = VALID_TYPE_MAP[targetType as FieldType] ?? EMPTY_SET;
-    const generalMatches = validTypeSet.has(f.type);
-
-    const filteredChildren = f.children ? filterFieldsByType(f.children, targetType) : [];
-    if (selfMatches || generalMatches || filteredChildren.length > 0) {
-      acc.push({ ...f, children: filteredChildren.length > 0 ? filteredChildren : f.children });
+    const filteredChildren = f.children ? filterFieldsByType(f.children, sourceType) : [];
+    if (filteredChildren.length > 0 || (!f.children?.length && isCompatibleType(sourceType, f.type))) {
+      acc.push({ ...f, children: filteredChildren.length > 0 ? filteredChildren : undefined });
     }
     return acc;
   }, []);
@@ -133,8 +133,8 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
 
   const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-output-config-portal');
 
-  const sourceOptions = sourceFields ? outputParamsToOptions(sourceFields) : [];
-  const targetOptions = targetFields ? fieldsToOptions(targetFields) : [];
+  const sourceOptions = useMemo(() => outputParamsToOptions(sourceFields ?? []), [sourceFields]);
+  const targetOptions = useMemo(() => fieldsToOptions(targetFields ?? []), [targetFields]);
 
   const handleDropdownOpenChange = useCallback((index: number, field: 'source' | 'target', open: boolean) => {
     if (open) {
@@ -161,7 +161,7 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
     const newItem = { ...newValue[index], sourceField: { fieldName: field.fieldName, fieldDesc: field.fieldDesc } };
     if (newItem.targetField.fieldName) {
       const targetOption = findFieldByName(targetOptions, newItem.targetField.fieldName);
-      if (targetOption && targetOption.type !== field.type) {
+      if (!isCompatibleType(field.type, targetOption?.type)) {
         newItem.targetField = { fieldName: '', fieldDesc: '' };
       }
     }
@@ -172,12 +172,21 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
   }, [value, onChange, targetOptions]);
 
   const handleSelectTargetField = useCallback((index: number, field: OutputFieldOption) => {
+    const sourceOption = flattenSourceFields(sourceOptions).find(
+      option => option.fieldName === value[index].sourceField.fieldName
+    );
+    if (!isCompatibleType(sourceOption?.type, field.type)) {
+      if (import.meta.env.DEV) {
+        console.warn('[OutputConfigEditor] 不兼容的输出映射', { sourceType: sourceOption?.type, targetType: field.type });
+      }
+      return;
+    }
     const newValue = [...value];
     newValue[index] = { ...newValue[index], targetField: { fieldName: field.fieldName, fieldDesc: field.fieldDesc } };
     onChange?.(newValue);
     setDropdownTarget(null);
     setSearchText('');
-  }, [value, onChange]);
+  }, [value, onChange, sourceOptions]);
 
   const toggleParent = useCallback((fieldName: string) => {
     setCollapsedParents(prev => {
@@ -209,6 +218,10 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
     (f) => (matchSearch(f.fieldDesc) || matchSearch(f.fieldName)) && f.type !== 'subform'
   );
 
+  const usedSourceFieldNames = new Set(
+    value.map(item => item.sourceField.fieldName).filter(Boolean)
+  );
+
   const searchedTargetFields = filterFields(targetOptions);
 
   const fieldRowCls = cn(
@@ -253,9 +266,10 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
         const selectedSourceType = item.sourceField.fieldName
           ? flatSourceFields.find(f => f.fieldName === item.sourceField.fieldName)?.type
           : undefined;
-        const rowTargetFields = selectedSourceType
-          ? filterFieldsByType(searchedTargetFields, selectedSourceType)
-          : searchedTargetFields;
+        const rowSourceFields = filteredSourceFields.filter(
+          f => !usedSourceFieldNames.has(f.fieldName) || f.fieldName === item.sourceField.fieldName
+        );
+        const rowTargetFields = filterFieldsByType(searchedTargetFields, selectedSourceType);
         return (
         <div key={index} className="flex gap-[10px] items-center">
           {/* Source field selector (JSON output field) */}
@@ -269,9 +283,9 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
                   isDropdownOpen(index, 'source') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
                 )}
               >
-                <span className="text-[14px] text-[#030303] leading-normal truncate">
-                  {item.sourceField.fieldDesc || <span className="text-[#999]">请选择字段</span>}
-                </span>
+                  <span className="text-[14px] text-[#030303] leading-normal truncate" title={item.sourceField.fieldDesc ?? "" }>
+                    {item.sourceField.fieldDesc || <span className="text-[#999]">请选择字段</span>}
+                  </span>
                 <CaretIcon className={cn(
                   'shrink-0 text-[#666]',
                   isDropdownOpen(index, 'source') && 'rotate-180',
@@ -303,7 +317,7 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
                 />
               </div>
               <div className="max-h-[210px] overflow-auto">
-                {filteredSourceFields.map((field) => (
+                {rowSourceFields.map((field) => (
                   <button
                     key={field.fieldName}
                     type="button"
@@ -319,7 +333,7 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
                     <span className="truncate">{field.fieldDesc}</span>
                   </button>
                 ))}
-                {filteredSourceFields.length === 0 && (
+                {rowSourceFields.length === 0 && (
                   <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
                     无匹配结果
                   </div>
@@ -344,9 +358,9 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
                   isDropdownOpen(index, 'target') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
                 )}
               >
-                <span className="text-[14px] text-[#030303] leading-normal truncate">
-                  {item.targetField.fieldDesc || <span className="text-[#999]">请选择表单字段</span>}
-                </span>
+                  <span className="text-[14px] text-[#030303] leading-normal truncate" title={item.targetField.fieldDesc ?? ""}>
+                    {item.targetField.fieldDesc || <span className="text-[#999]">请选择表单字段</span>}
+                  </span>
                 <CaretIcon className={cn(
                   'shrink-0 text-[#666]',
                   isDropdownOpen(index, 'target') && 'rotate-180',

package/src/components/primary-confirm-btn.tsx

@@ -8,6 +8,8 @@ export interface PrimaryConfirmBtnProps extends ButtonProps {
   icon?: React.ReactNode;
   disabledWithInfo?: boolean;
   light?: boolean;
+  /** 移动端按钮高度 40px、文本 16px（PC 端 34px / 14px） */
+  isMobile?: boolean;
 }
 
 export const PrimaryConfirmBtn = ({
@@ -18,15 +20,18 @@ export const PrimaryConfirmBtn = ({
   light,
   icon,
   children,
+  isMobile,
   ...rest
 }: PrimaryConfirmBtnProps) => {
+  const sizeCls = isMobile ? 'h-[40px] text-[16px]' : 'h-[34px] text-[14px]';
   const btn = (
     <Button
       {...rest}
       variant="default"
       disabled={disabled}
       className={cn(
-        'px-[10px] py-0 rounded-[100px] text-[14px] leading-normal h-[34px] min-w-[100px] cursor-pointer w-full disabled:opacity-100 gap-[6px] shadow-none',
+        'px-[10px] py-0 rounded-[100px] leading-normal min-w-[100px] cursor-pointer w-full disabled:opacity-100 gap-[6px] shadow-none',
+        sizeCls,
         disabled
           ? 'bg-[#f0f0f0] text-[#999] cursor-not-allowed shadow-none'
           : light

package/src/components/scroll-to-bottom-btn.tsx

@@ -5,9 +5,10 @@ import { ScrollArrowDownIcon } from './bs-icons';
 export interface ScrollToBottomProps {
   onClick?: () => void;
   className?: string;
+  isMobile?: boolean;
 }
 
-export const ScrollToBottomBtn = ({ onClick, className }: ScrollToBottomProps) => {
+export const ScrollToBottomBtn = ({ onClick, className, isMobile }: ScrollToBottomProps) => {
   return (
     <button
       type="button"
@@ -22,7 +23,7 @@ export const ScrollToBottomBtn = ({ onClick, className }: ScrollToBottomProps) =
         className
       )}
     >
-      <ScrollArrowDownIcon />
+      <ScrollArrowDownIcon size={isMobile ? 20 : 24 } />
     </button>
   );
 };

package/src/components/shadow-content.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { useShadowBoundary } from '../hooks/use-shadow-boundary';
+import type { ShadowStyle, ShadowStyleMode } from '../hooks/use-shadow-boundary';
+
+export interface ShadowContentProps {
+  children: ReactNode;
+  mode?: ShadowStyleMode;
+  styles?: ShadowStyle;
+}
+
+export const ShadowContent = ({ children, mode = 'sdk', styles }: ShadowContentProps) => {
+  const { setHostRef, container } = useShadowBoundary(mode, styles);
+  return (
+    <div ref={setHostRef} data-bs-style-mode={mode} style={{ display: 'contents' }}>
+      {container && createPortal(children, container)}
+    </div>
+  );
+};

package/src/components/shadow-portal.tsx

@@ -0,0 +1,23 @@
+import { useLayoutEffect, type ElementType, type ReactNode } from 'react';
+import { usePortalContainer } from '../hooks/use-portal-container';
+
+export const ShadowPortal = ({ component: Portal, container, ...props }: {
+  component: ElementType;
+  container?: Element | DocumentFragment | null;
+  children?: ReactNode;
+  forceMount?: true;
+  'data-slot'?: string;
+}) => {
+  const { portalContainer, setTriggerRef, portalReady } = usePortalContainer('data-bs-portal-container');
+  useLayoutEffect(() => {
+    if (container instanceof Element && container.parentNode instanceof ShadowRoot) {
+      container.setAttribute('data-bs-portal-container', '');
+    }
+  }, [container]);
+  return (
+    <>
+      <span ref={setTriggerRef} style={{ display: 'none' }} aria-hidden />
+      {portalReady && <Portal {...props} container={container === undefined ? portalContainer ?? undefined : container} />}
+    </>
+  );
+};

package/src/components/ui/dialog.tsx

@@ -2,12 +2,15 @@ import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal;
+const DialogPortal = (props: React.ComponentProps<typeof DialogPrimitive.Portal>) => (
+  <ShadowPortal component={DialogPrimitive.Portal} {...props} />
+);
 
 const DialogClose = DialogPrimitive.Close;
 

package/src/components/ui/drawer.tsx

@@ -4,6 +4,7 @@ import { Drawer as DrawerPrimitive } from "vaul"
 import { cn } from "../../lib/utils"
 import { IconBtn } from "../icon-btn"
 import { CloseIcon } from "../bs-icons"
+import { ShadowPortal } from '../shadow-portal';
 
 function Drawer({
   ...props
@@ -24,7 +25,8 @@ function DrawerPortal({
   container?: HTMLElement | null;
 }) {
   return (
-    <DrawerPrimitive.Portal
+    <ShadowPortal
+      component={DrawerPrimitive.Portal}
       data-slot="drawer-portal"
       container={container ?? undefined}
       {...props}

package/src/components/ui/enhanced-drawer.tsx

@@ -0,0 +1,134 @@
+import { useCallback, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../lib/utils';
+import { Drawer, DrawerContent, DrawerTitle } from './drawer';
+
+export type EnhancedDrawerDirection = 'left' | 'right' | 'top' | 'bottom';
+
+export interface EnhancedDrawerProps {
+  /** 受控开关 */
+  open?: boolean;
+  /** 非受控默认开关 */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 滑入方向，默认 right */
+  direction?: EnhancedDrawerDirection;
+  /** 侧边抽屉宽度（left/right 生效），默认 300 */
+  width?: number;
+  /** 无障碍标题（sr-only 展示） */
+  title?: string;
+  /** 是否显示遮罩，默认 true */
+  showOverlay?: boolean;
+  /** 点击遮罩是否关闭，默认 true */
+  overlayClosable?: boolean;
+  /** 遮罩点击回调（额外行为，如打点） */
+  onOverlayClick?: () => void;
+  /** 遮罩附加样式 */
+  overlayStyle?: React.CSSProperties;
+  /** 抽屉面板附加 className */
+  className?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * 增强版抽屉（基于 vaul，面向 shadow DOM / WebView 环境的封装）。
+ *
+ * 统一处理了以下兼容问题，业务组件无需再各自处理：
+ * 1. `modal={false}` —— 关闭 Radix Dialog 的 body 滚动锁（react-remove-scroll 的
+ *    touchmove preventDefault 在 shadow DOM 里因事件目标 retarget 无法识别抽屉内
+ *    滚动容器，会锁死滚动）；同时 vaul 的 Overlay 在 modal=false 时返回 null。
+ * 2. `dismissible={false}` —— 关闭 vaul 拖拽关闭，避免 onPress 每次 pointerdown 都
+ *    setPointerCapture 禁掉原生触摸滚动。
+ * 3. 手动渲染遮罩（vaul 遮罩因 modal=false 消失），点遮罩关闭走受控路径
+ *    （绕过被 dismissible 拦掉的 vaul 关闭路径）。
+ *
+ * 内容区若需滚动，业务组件在自身滚动容器上加 `data-vaul-no-drag`（保险，
+ * dismissible=false 已阻止拖拽，此标记可防未来语义变化）。
+ */
+export const EnhancedDrawer = ({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  direction = 'right',
+  width = 300,
+  title,
+  showOverlay = true,
+  overlayClosable = true,
+  onOverlayClick,
+  overlayStyle,
+  className,
+  children,
+}: EnhancedDrawerProps) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (controlledOpen === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+
+  // 遮罩 portal 容器：抽屉内容经 vaul portal 进所在 shadow root，遮罩需与之同层
+  // 才能正确叠在抽屉下方（z 更低）且覆盖全屏
+  const [maskContainer, setMaskContainer] = useState<Element | null>(null);
+  const maskHostRef = useCallback((node: HTMLSpanElement | null) => {
+    if (!node) {
+      setMaskContainer(null);
+      return;
+    }
+    const root = node.getRootNode();
+    setMaskContainer(
+      root instanceof ShadowRoot ? (root as unknown as Element) : document.body
+    );
+  }, []);
+
+  const handleOverlayClick = useCallback(() => {
+    onOverlayClick?.();
+    if (overlayClosable) setOpen(false);
+  }, [onOverlayClick, overlayClosable, setOpen]);
+
+  const isHorizontal = direction === 'left' || direction === 'right';
+
+  return (
+    <>
+      <span ref={maskHostRef} style={{ display: 'none' }} />
+
+      {showOverlay &&
+        open &&
+        maskContainer &&
+        createPortal(
+          <div
+            onClick={handleOverlayClick}
+            aria-hidden="true"
+            style={{
+              position: 'fixed',
+              inset: 0,
+              background: 'rgba(0,0,0,0.3)',
+              zIndex: 40,
+              ...overlayStyle,
+            }}
+          />,
+          maskContainer
+        )}
+
+      <Drawer
+        open={open}
+        onOpenChange={setOpen}
+        direction={direction}
+        modal={false}
+        dismissible={false}
+      >
+        <DrawerContent
+          className={cn(className)}
+          hideOverlay
+          style={isHorizontal ? { width: `${width}px`, maxWidth: `${width}px` } : undefined}
+        >
+          {title != null && <DrawerTitle className="sr-only">{title}</DrawerTitle>}
+          {children}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};

package/src/components/ui/popover.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const Popover = PopoverPrimitive.Root;
 
@@ -52,7 +53,7 @@ const PopoverContent = React.forwardRef<
     });
 
     return (
-      <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
+      <ShadowPortal component={PopoverPrimitive.Portal} container={portalContainer ?? undefined}>
         <PopoverPrimitive.Content
           ref={ref}
           align={align}
@@ -76,7 +77,7 @@ const PopoverContent = React.forwardRef<
           }}
           {...props}
         />
-      </PopoverPrimitive.Portal>
+      </ShadowPortal>
     );
   }
 );

package/src/components/ui/select.tsx

@@ -3,6 +3,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const Select = SelectPrimitive.Root;
 
@@ -112,7 +113,7 @@ const SelectContent = React.forwardRef<
         {containerProp === undefined && (
           <span ref={setDetectorRef} style={{ display: 'none' }} aria-hidden />
         )}
-        <SelectPrimitive.Portal container={effectiveContainer ?? undefined}>
+        <ShadowPortal component={SelectPrimitive.Portal} container={effectiveContainer ?? undefined}>
           <SelectPrimitive.Content
             ref={ref}
             className={cn(
@@ -161,7 +162,7 @@ const SelectContent = React.forwardRef<
             </SelectPrimitive.Viewport>
             <SelectScrollDownButton />
           </SelectPrimitive.Content>
-        </SelectPrimitive.Portal>
+        </ShadowPortal>
       </>
     );
   }

package/src/components/ui/tooltip.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const TooltipZIndexContext = React.createContext<number | undefined>(undefined);
 
@@ -30,7 +31,7 @@ const TooltipContent = React.forwardRef<
   const zIndexFromProvider = React.useContext(TooltipZIndexContext);
 
   return (
-    <TooltipPrimitive.Portal container={portalContainer ?? undefined}>
+    <ShadowPortal component={TooltipPrimitive.Portal} container={portalContainer ?? undefined}>
       <TooltipPrimitive.Content
         ref={ref}
         sideOffset={sideOffset}
@@ -44,7 +45,7 @@ const TooltipContent = React.forwardRef<
         {props.children}
         <TooltipPrimitive.Arrow className="fill-[#525867] stroke-[#525867] stroke-[2px] stroke-linejoin-round [paint-order:stroke_fill]" />
       </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
+    </ShadowPortal>
   );
 });