@baishuyun/ai-design 2.0.44 → 2.0.47

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @baishuyun/ai-design
 
+## 2.0.47
+
+### Patch Changes
+
+- fix agent helper style
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.42
+  - @baishuyun/types@3.0.39
+
+## 2.0.46
+
+### Patch Changes
+
+- fix host style overwrite
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.41
+  - @baishuyun/types@3.0.38
+
+## 2.0.45
+
+### Patch Changes
+
+- fix mask layer
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.40
+  - @baishuyun/types@3.0.37
+
 ## 2.0.44
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/ai-design",
-  "version": "2.0.44",
+  "version": "2.0.47",
   "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
   "type": "module",
   "main": "src/index.ts",
@@ -60,8 +60,8 @@
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13",
-    "@baishuyun/ai-feat-utils": "2.0.39",
-    "@baishuyun/types": "3.0.36"
+    "@baishuyun/ai-feat-utils": "2.0.42",
+    "@baishuyun/types": "3.0.39"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -84,7 +84,7 @@
     "vite": "^5.1.4",
     "vite-plugin-dts": "^4.5.4",
     "@baishuyun/tailwind-config": "3.0.9",
-    "@baishuyun/types": "3.0.36",
+    "@baishuyun/types": "3.0.39",
     "@baishuyun/typescript-config": "2.0.9"
   },
   "keywords": [],

package/src/components/agent-helper/app-select/index.tsx

@@ -6,6 +6,7 @@ import { SquareChecker } from '../../square-checker';
 import type { IAppGroup, IAppGroupItem } from '@baishuyun/types';
 import { AppIcon } from '../../font-icon';
 import { SearchIcon } from '../../bs-icons';
+import classNames from 'classnames';
 
 // ── Tree Node Type ────────────────────────────────────────────────
 
@@ -41,7 +42,10 @@ export function groupsToAppTreeNodes(groups: IAppGroup[]): AppTreeNode[] {
 /** Folder/group icon (16x16) */
 const FolderIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-    <path d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z" fill="#6F81BD"/>
+    <path
+      d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z"
+      fill="#6F81BD"
+    />
   </svg>
 );
 
@@ -70,11 +74,20 @@ const FolderIcon = () => (
 /** Collapse/expand toggle (18x18) — shown on expandable parent nodes */
 const ToggleIcon = ({ expanded }: { expanded: boolean }) => (
   <svg
-    width="18" height="18" viewBox="0 0 18 18" fill="none"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
     className={cn('shrink-0', transCls)}
     style={{ transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
   >
-    <path d="M6 8L9 11L12 8" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    <path
+      d="M6 8L9 11L12 8"
+      stroke="#666666"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </svg>
 );
 
@@ -97,11 +110,20 @@ const MoreIcon = () => (
 /** Dropdown chevron in trigger — matches Figma trigger icon */
 const DropdownChevron = ({ open }: { open: boolean }) => (
   <svg
-    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
     className={cn('shrink-0', transCls)}
     style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
   >
-    <path d="M4 6L8 10L12 6" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    <path
+      d="M4 6L8 10L12 6"
+      stroke="#666666"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </svg>
 );
 
@@ -130,6 +152,7 @@ export interface AppSelectProps {
   maxVisibleChips?: number;
   /** Additional className */
   className?: string;
+  contentCls?: string;
   /** Show a "全部应用" (All Apps) item at the top. Only effective in single mode. */
   showAll?: boolean;
   /** Allow selecting an empty value as the first option. Only effective in single mode. */
@@ -137,6 +160,8 @@ export interface AppSelectProps {
   /** Label for the empty option. Default "无". */
   emptyLabel?: string;
   popoverContentOnly?: boolean; // for testing: render only the popover content without the trigger
+
+  disableMaxHeight?: boolean;
 }
 
 // ── Helpers ───────────────────────────────────────────────────────
@@ -171,6 +196,8 @@ export const AppSelect = ({
   disabled = false,
   maxVisibleChips = 4,
   className,
+  contentCls,
+  disableMaxHeight,
 }: AppSelectProps) => {
   const [open, setOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -181,6 +208,11 @@ export const AppSelect = ({
   const [triggerWidth, setTriggerWidth] = useState<number>(0);
   const triggerBtnRef = useRef<HTMLButtonElement | null>(null);
 
+  const maxTreeHeightCls = classNames({
+    'max-h-[400px]': !disableMaxHeight,
+    'max-h-full': disableMaxHeight,
+  });
+
   // Expanded node IDs (only nodes with children can be expanded)
   const [expandedIds, setExpandedIds] = useState<Set<string>>(() => {
     // Start with root nodes expanded
@@ -213,7 +245,7 @@ export const AppSelect = ({
 
   // Selected labels for trigger
   const selectedLabels = useMemo(() => {
-    const ids = Array.isArray(resolvedValue) ? resolvedValue : (resolvedValue ? [resolvedValue] : []);
+    const ids = Array.isArray(resolvedValue) ? resolvedValue : resolvedValue ? [resolvedValue] : [];
     return ids.map((id) => nodeMap.get(id)?.label ?? id);
   }, [resolvedValue, nodeMap]);
 
@@ -236,7 +268,10 @@ export const AppSelect = ({
         const labelMatch = node?.label?.toLowerCase().includes(q);
         const filteredChildren = node.children ? filterTree(node.children) : [];
         if (labelMatch || filteredChildren.length > 0) {
-          result.push({ ...node, children: filteredChildren.length > 0 ? filteredChildren : node.children });
+          result.push({
+            ...node,
+            children: filteredChildren.length > 0 ? filteredChildren : node.children,
+          });
         }
       }
       return result;
@@ -249,11 +284,17 @@ export const AppSelect = ({
   const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
     triggerBtnRef.current = node;
     if (node) setTriggerWidth(node.offsetWidth);
-    if (!node) { setPortalContainer(null); return; }
+    if (!node) {
+      setPortalContainer(null);
+      return;
+    }
     const rootNode = node.getRootNode();
     if (rootNode instanceof ShadowRoot) {
       const existing = rootNode.querySelector<HTMLElement>('[data-bs-app-select-portal]');
-      if (existing) { setPortalContainer(existing); return; }
+      if (existing) {
+        setPortalContainer(existing);
+        return;
+      }
       const container = document.createElement('div');
       container.setAttribute('data-bs-app-select-portal', 'true');
       rootNode.appendChild(container);
@@ -354,9 +395,7 @@ export const AppSelect = ({
               'flex items-center gap-[6px] w-full h-[34px] rounded-[4px] text-left',
               'pr-[10px]',
               transCls,
-              isSelected
-                ? 'bg-[#F0F6FF] text-[#0265FF]'
-                : 'text-[#030303] hover:bg-[#EFF0F6]'
+              isSelected ? 'bg-[#F0F6FF] text-[#0265FF]' : 'text-[#030303] hover:bg-[#EFF0F6]'
             )}
             style={{ paddingLeft: `${leftPad}px`, paddingTop: '10px', paddingBottom: '10px' }}
           >
@@ -376,7 +415,7 @@ export const AppSelect = ({
 
             {/* SquareChecker for multi-select on leaf nodes — always visible */}
             {mode === 'multiple' && !hasChildren && node.type !== 'group' && (
-              <span onClick={(e) => e.stopPropagation()} className='grid place-items-center'>
+              <span onClick={(e) => e.stopPropagation()} className="grid place-items-center">
                 <SquareChecker
                   checked={isSelected}
                   onCheckedChange={() => handleSelect(node.id, node)}
@@ -388,9 +427,7 @@ export const AppSelect = ({
 
           {/* Children (when expanded) */}
           {hasChildren && isExpanded && (
-            <div>
-              {node.children!.map((child) => renderNodeRow(child, depth + 1))}
-            </div>
+            <div>{node.children!.map((child) => renderNodeRow(child, depth + 1))}</div>
           )}
         </div>
       );
@@ -403,70 +440,70 @@ export const AppSelect = ({
   const hasMultiSelection = mode === 'multiple' && multiSelectedLabels.length > 0;
 
   const popoverContent = (
-          <div className="flex flex-col gap-[4px]">
-            {/* Search */}
-            <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
-              <SearchIcon />
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder={searchPlaceholder}
-                className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
-              />
-            </div>
-
-            {/* Empty option */}
-            {allowEmpty && mode === 'single' && !searchQuery.trim() && (
-              <button
-                type="button"
-                onClick={() => {
-                  updateValue('');
-                  setOpen(false);
-                }}
-                className={cn(
-                  'flex items-center w-full h-[34px] rounded-[4px] text-left',
-                  'px-[10px]',
-                  transCls,
-                  'text-[#030303] hover:bg-[#EFF0F6]'
-                )}
-              >
-                <span className="text-[14px] leading-[normal]">{emptyLabel}</span>
-              </button>
-            )}
-
-            {/* "全部应用" item */}
-            {showAll && mode === 'single' && !searchQuery.trim() && (
-              <button
-                type="button"
-                onClick={() => {
-                  updateValue(ALL_APPS_VALUE);
-                  setOpen(false);
-                }}
-                className={cn(
-                  'flex items-center w-full h-[34px] rounded-[4px] text-left',
-                  'px-[10px]',
-                  transCls,
-                  selectedIds.has(ALL_APPS_VALUE)
-                    ? 'bg-[#F0F6FF] text-[#0265FF]'
-                    : 'text-[#030303] hover:bg-[#EFF0F6]'
-                )}
-              >
-                <span className="text-[14px] leading-[normal]">全部应用</span>
-              </button>
-            )}
-
-            {/* Tree */}
-            <div className="max-h-[400px] overflow-y-auto">
-              {filteredNodes.length > 0 ? (
-                filteredNodes.map((node) => renderNodeRow(node, 0))
-              ) : (
-                <div className="flex items-center justify-center h-[60px] text-[12px] text-[#999999]">
-                  {searchQuery.trim() ? '未找到相关应用' : '暂无应用'}
-                </div>
-              )}
-            </div>
+    <div className={classNames('flex flex-col gap-[4px]', contentCls)}>
+      {/* Search */}
+      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+        <SearchIcon />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={searchPlaceholder}
+          className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
+        />
+      </div>
+
+      {/* Empty option */}
+      {allowEmpty && mode === 'single' && !searchQuery.trim() && (
+        <button
+          type="button"
+          onClick={() => {
+            updateValue('');
+            setOpen(false);
+          }}
+          className={cn(
+            'flex items-center w-full h-[34px] rounded-[4px] text-left',
+            'px-[10px]',
+            transCls,
+            'text-[#030303] hover:bg-[#EFF0F6]'
+          )}
+        >
+          <span className="text-[14px] leading-[normal]">{emptyLabel}</span>
+        </button>
+      )}
+
+      {/* "全部应用" item */}
+      {showAll && mode === 'single' && !searchQuery.trim() && (
+        <button
+          type="button"
+          onClick={() => {
+            updateValue(ALL_APPS_VALUE);
+            setOpen(false);
+          }}
+          className={cn(
+            'flex items-center w-full h-[34px] rounded-[4px] text-left',
+            'px-[10px]',
+            transCls,
+            selectedIds.has(ALL_APPS_VALUE)
+              ? 'bg-[#F0F6FF] text-[#0265FF]'
+              : 'text-[#030303] hover:bg-[#EFF0F6]'
+          )}
+        >
+          <span className="text-[14px] leading-[normal]">全部应用</span>
+        </button>
+      )}
+
+      {/* Tree */}
+      <div className={classNames('overflow-y-auto', maxTreeHeightCls)}>
+        {filteredNodes.length > 0 ? (
+          filteredNodes.map((node) => renderNodeRow(node, 0))
+        ) : (
+          <div className="flex items-center justify-center h-[60px] text-[12px] text-[#999999]">
+            {searchQuery.trim() ? '未找到相关应用' : '暂无应用'}
           </div>
+        )}
+      </div>
+    </div>
   );
 
   if (popoverContentOnly) {
@@ -511,9 +548,7 @@ export const AppSelect = ({
                       <span className="text-[14px] text-[#030303] truncate leading-[normal]">
                         {label}
                       </span>
-                      <span
-                        className="cursor-pointer flex items-center shrink-0 hover:bg-[#EFF0F6]"
-                      >
+                      <span className="cursor-pointer flex items-center shrink-0 hover:bg-[#EFF0F6]">
                         <CloseIcon />
                       </span>
                     </span>