@baishuyun/ai-design 1.0.2 → 1.0.4

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

@@ -0,0 +1,121 @@
+import type { triggerType } from '@baishuyun/types';
+import { CommonTypeIcon, GoToFormIcon, FlowNodeTypeIcon, ScheduleTypeIcon, FormFieldIcon, FormTypeIcon } from '../../bs-icons';
+import { IconCard, type IconCardProps } from '../../icon-card';
+
+export type TriggerCardConfig = Pick<
+  IconCardProps,
+  'title' | 'description' | 'icon' | 'iconBgColor' | 'badge'
+> & {
+  triggerType: triggerType;
+  minIcon?: React.ReactNode;
+};
+
+export const TriggerConfigList: Array<TriggerCardConfig> = [
+  {
+    triggerType: 'universal',
+    title: '通用型',
+    description: '开箱即用，无需触发即可直接使用',
+    icon: <CommonTypeIcon fill="#4ACCC1" />,
+    minIcon: <CommonTypeIcon fill="#4ACCC1" size={12} />,
+    iconBgColor: 'rgba(74, 204, 193, 0.1)',
+    badge: '通用',
+  },
+  {
+    triggerType: 'form_field',
+    title: '表单字段触发',
+    description: '表单中数据发生变化时，触发自动化操作',
+    icon: <FormFieldIcon />,
+    minIcon: <FormFieldIcon size={12} />,
+    iconBgColor: 'rgba(77, 96, 159, 0.1)',
+  },
+  {
+    triggerType: 'form_action',
+    title: '表单动作触发',
+    description: '表单中数据发生变化时，触发自动化操作',
+    icon: (
+      <div className="text-[#0265FF]">
+        <GoToFormIcon />
+      </div>
+    ),
+    minIcon: <FormTypeIcon size={12} />,
+    iconBgColor: 'rgba(2, 101, 255, 0.1)',
+  },
+  {
+    triggerType: 'form_flow_node',
+    title: '表单流程节点触发',
+    description: '表单中数据发生变化时，触发自动化操作',
+    icon: (
+      <div className="text-[#FF9921]">
+        <FlowNodeTypeIcon />
+      </div>
+    ),
+    minIcon: <FlowNodeTypeIcon size={12} />,
+    iconBgColor: 'rgba(255, 153, 33, 0.1)',
+  },
+  {
+    triggerType: 'scheduler',
+    title: '计划任务触发',
+    description: '表单中数据发生变化时，触发自动化操作',
+    icon: (
+      <div className="text-[#F06648]">
+        <ScheduleTypeIcon />
+      </div>
+    ),
+    minIcon: <ScheduleTypeIcon size={12} />,
+    iconBgColor: 'rgba(240, 102, 72, 0.1)',
+  },
+];
+
+export interface ITriggerSelectProps {
+  value?: triggerType;
+  onChange?: (value: triggerType) => void;
+  configList?: TriggerCardConfig[];
+}
+
+export const TriggerTypeIcon = ({
+  triggerType,
+}: {
+  triggerType: triggerType;
+  size?: number;
+}) => {
+  const config = TriggerConfigList.find((c) => c.triggerType === triggerType);
+  if (!config) {
+    return null;
+  }
+
+  const {minIcon, iconBgColor } = config;
+
+  return (
+    <div
+      className={`shrink-0 rounded-full flex items-center justify-center p-[7px]`}
+      style={{ backgroundColor: iconBgColor, width: 18, height: 18 }}
+    >
+      <div className={`flex items-center justify-center`}>
+          {minIcon}
+      </div>
+    </div>
+  )
+}
+
+export const TriggerSelect = ({
+  value,
+  onChange,
+  configList = TriggerConfigList,
+}: ITriggerSelectProps) => {
+  return (
+    <div className="grid grid-cols-3 gap-5">
+      {configList.map((config) => (
+        <IconCard
+          key={config.triggerType}
+          icon={config.icon}
+          iconBgColor={config.iconBgColor}
+          title={config.title}
+          description={config.description}
+          badge={config.badge}
+          selected={value === config.triggerType}
+          onClick={() => onChange?.(config.triggerType)}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/agent-helper/trigger-time-preference-select/index.tsx

@@ -0,0 +1,189 @@
+import { useCallback } from 'react';
+import { cn } from '../../../lib/utils';
+import { TriggerTimeSourceTypeSelect } from '../trigger-time-source-type-select';
+import { DateInput } from '../date-picker/date-input';
+import { FormSelect } from '../form-select';
+import type { FormSelectItem, FormSelectChangeResult } from '../form-select';
+import { FieldSelect } from '../field-select';
+import { OffsetPreferenceSelect } from '../offset-preference-select';
+import type {
+  ITriggerTimePreference,
+  IDateFieldTriggerTimePayload,
+  triggerTimeSourceType,
+  IField,
+  IOffsetPreference,
+} from '@baishuyun/types';
+import type { DateFormat } from '../date-picker/types';
+
+export interface TriggerTimePreferenceSelectProps {
+  value?: ITriggerTimePreference;
+  onChange?: (value: ITriggerTimePreference) => void;
+  forms?: FormSelectItem[];
+  fields?: IField[];
+  dateFormat?: DateFormat;
+  disabled?: boolean;
+  className?: string;
+}
+
+function isDateFieldPayload(
+  payload: unknown,
+): payload is IDateFieldTriggerTimePayload {
+  return (
+    typeof payload === 'object' && payload !== null && 'formId' in payload
+  );
+}
+
+function buildDateFieldPayload(
+  overrides: Partial<IDateFieldTriggerTimePayload>,
+  existing?: IDateFieldTriggerTimePayload,
+): IDateFieldTriggerTimePayload {
+  return {
+    dateFieldType: 'datetime',
+    offsetType: 'time',
+    offsetValue: 0,
+    offsetUnit: 'minute',
+    ...existing,
+    ...overrides,
+    formId: overrides.formId ?? existing?.formId ?? '',
+    fieldId: overrides.fieldId ?? existing?.fieldId ?? '',
+  };
+}
+
+function parseDateFromPayload(payload: unknown): Date | undefined {
+  if (typeof payload === 'string' || typeof payload === 'number') {
+    const d = new Date(payload);
+    return isNaN(d.getTime()) ? undefined : d;
+  }
+  return undefined;
+}
+
+export function TriggerTimePreferenceSelect({
+  value,
+  onChange,
+  forms = [],
+  fields = [],
+  dateFormat = 'yyyy-MM-dd',
+  disabled = false,
+  className,
+}: TriggerTimePreferenceSelectProps) {
+  const selectedType = value?.type;
+
+  const dateFieldPayload = isDateFieldPayload(value?.customTriggerTimePayload)
+    ? value.customTriggerTimePayload
+    : undefined;
+
+  const handleTypeChange = useCallback(
+    (type: triggerTimeSourceType) => {
+      onChange?.({ type });
+    },
+    [onChange],
+  );
+
+  const handleDateChange = useCallback(
+    (date: Date | null) => {
+      onChange?.({
+        type: 'custom',
+        customTriggerTimePayload: date ? date.toISOString() : undefined,
+      });
+    },
+    [onChange],
+  );
+
+  const handleFormChange = useCallback(
+    (result: FormSelectChangeResult) => {
+      const payload = buildDateFieldPayload(
+        { formId: result.form.id },
+        dateFieldPayload,
+      );
+      onChange?.({ type: 'date_field', customTriggerTimePayload: payload });
+    },
+    [onChange, dateFieldPayload],
+  );
+
+  const handleFieldChange = useCallback(
+    (_field: IField, nodeKey: string) => {
+      const payload = buildDateFieldPayload(
+        { fieldId: nodeKey },
+        dateFieldPayload,
+      );
+      onChange?.({ type: 'date_field', customTriggerTimePayload: payload });
+    },
+    [onChange, dateFieldPayload],
+  );
+
+  const handleOffsetPreferenceChange = useCallback(
+    (offsetPref: IOffsetPreference) => {
+      const payload = buildDateFieldPayload(
+        {
+          dateFieldType: offsetPref.dateFieldType,
+          offsetType: offsetPref.offsetType,
+          offsetValue: offsetPref.offsetValue,
+          offsetUnit: offsetPref.offsetUnit,
+        },
+        dateFieldPayload,
+      );
+      onChange?.({ type: 'date_field', customTriggerTimePayload: payload });
+    },
+    [onChange, dateFieldPayload],
+  );
+
+  return (
+    <div className={cn('flex flex-col gap-[10px]', className)}>
+      {/* Row 1 */}
+      <div className="flex gap-[22px] items-start w-full">
+        <TriggerTimeSourceTypeSelect
+          className="flex-1 min-w-0"
+          value={selectedType}
+          onChange={handleTypeChange}
+          disabled={disabled}
+        />
+
+        {selectedType === 'custom' && (
+          <DateInput
+            className="flex-1 min-w-0"
+            value={parseDateFromPayload(value?.customTriggerTimePayload)}
+            onChange={handleDateChange}
+            format={dateFormat}
+            disabled={disabled}
+          />
+        )}
+
+        {selectedType === 'date_field' && (
+          <FormSelect
+            className="flex-1 min-w-0"
+            items={forms}
+            value={dateFieldPayload?.formId}
+            onChange={handleFormChange}
+            disabled={disabled}
+          />
+        )}
+      </div>
+
+      {/* Row 2 - field select + offset preference, only for date_field */}
+      {selectedType === 'date_field' && (
+        <div className="flex items-start gap-[10px] w-full">
+          <FieldSelect
+            className="w-[300px]"
+            fields={fields}
+            value={dateFieldPayload?.fieldId}
+            onChange={handleFieldChange}
+            disabled={disabled}
+          />
+          {dateFieldPayload && (
+            <OffsetPreferenceSelect
+              value={{
+                dateFieldType: dateFieldPayload.dateFieldType,
+                offsetType: dateFieldPayload.offsetType,
+                offsetValue: dateFieldPayload.offsetValue,
+                offsetUnit: dateFieldPayload.offsetUnit,
+              }}
+              onChange={handleOffsetPreferenceChange}
+              dateFieldType={dateFieldPayload.dateFieldType}
+              disabled={disabled}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/agent-helper/trigger-time-source-type-select/index.tsx

@@ -0,0 +1,53 @@
+import type { triggerTimeSourceType } from '@baishuyun/types';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../ui/select';
+
+export interface TriggerTimeSourceTypeOption {
+  value: triggerTimeSourceType;
+  label: string;
+}
+
+export const TriggerTimeSourceTypeOptions: TriggerTimeSourceTypeOption[] = [
+  { value: 'custom', label: '自定义时间' },
+  { value: 'date_field', label: '根据表单日期时间字段' },
+];
+
+export interface TriggerTimeSourceTypeSelectProps {
+  value?: triggerTimeSourceType;
+  onChange?: (value: triggerTimeSourceType) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const TriggerTimeSourceTypeSelect = ({
+  value,
+  onChange,
+  placeholder = '请选择时间来源类型',
+  disabled = false,
+  className,
+}: TriggerTimeSourceTypeSelectProps) => {
+  return (
+    <Select
+      value={value}
+      onValueChange={(v) => onChange?.(v as triggerTimeSourceType)}
+      disabled={disabled}
+    >
+      <SelectTrigger className={className}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {TriggerTimeSourceTypeOptions.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};

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

@@ -0,0 +1,230 @@
+import { useState, useCallback } from 'react';
+import type { repeatByWeekDetail } from '@baishuyun/types';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { SquareChecker } from '../../square-checker';
+import { ClearAllIcon } from '../../icons/clear-all-icon';
+import { usePortalContainer } from '../../../hooks/use-portal-container';
+
+export interface WeekdaysOption {
+  value: repeatByWeekDetail;
+  label: string;
+}
+
+export const WeekdaysOptions: WeekdaysOption[] = [
+  { value: 'mon', label: '星期一' },
+  { value: 'tue', label: '星期二' },
+  { value: 'wed', label: '星期三' },
+  { value: 'thu', label: '星期四' },
+  { value: 'fri', label: '星期五' },
+  { value: 'sat', label: '星期六' },
+  { value: 'sun', label: '星期日' },
+];
+
+export interface WeekdaysSelectProps {
+  value?: repeatByWeekDetail[];
+  onChange?: (value: repeatByWeekDetail[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const CloseIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
+    <path d="M3 3L9 9M9 3L3 9" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
+  </svg>
+);
+
+const DropdownChevron = ({ open }: { open: boolean }) => (
+  <svg
+    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" />
+  </svg>
+);
+
+export const WeekdaysSelect = ({
+  value = [],
+  onChange,
+  placeholder = '请选择工作日',
+  disabled = false,
+  className,
+}: WeekdaysSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+
+  const allSelected = value.length === WeekdaysOptions.length;
+  const someSelected = value.length > 0 && value.length < WeekdaysOptions.length;
+
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-weekdays-select-portal');
+
+  const handleToggle = useCallback(
+    (weekday: repeatByWeekDetail) => {
+      const next = value.includes(weekday)
+        ? value.filter((v) => v !== weekday)
+        : [...value, weekday];
+      onChange?.(next);
+    },
+    [value, onChange]
+  );
+
+  const handleSelectAll = useCallback(() => {
+    if (allSelected) {
+      onChange?.([]);
+    } else {
+      onChange?.(WeekdaysOptions.map((opt) => opt.value));
+    }
+  }, [allSelected, onChange]);
+
+  const handleClearAll = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange]
+  );
+
+  const handleRemove = useCallback(
+    (weekday: repeatByWeekDetail, e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.(value.filter((v) => v !== weekday));
+    },
+    [value, onChange]
+  );
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (disabled) return;
+      setOpen(nextOpen);
+    },
+    [disabled]
+  );
+
+  const hasSelection = value.length > 0;
+  const showClear = hasSelection && isHovering;
+
+  return (
+    <div className={cn('relative', className)}>
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            disabled={disabled}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            ref={setTriggerRef}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px] gap-2.5',
+              'bg-white border border-[#E0E0E0] rounded-[4px]',
+              'py-[7px]',
+              hasSelection ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
+              'text-left cursor-pointer',
+              'hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open && 'border-[#0265FF]',
+              transCls
+            )}
+          >
+            {hasSelection ? (
+              <>
+                <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+                  {value.map((weekday) => {
+                    const opt = WeekdaysOptions.find((o) => o.value === weekday);
+                    return (
+                      <span
+                        key={weekday}
+                        className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0"
+                      >
+                        <span className="text-[14px] text-[#030303] leading-[normal]">
+                          {opt?.label}
+                        </span>
+                        <span
+                          className="cursor-pointer flex items-center shrink-0"
+                          onClick={(e) => handleRemove(weekday, e)}
+                        >
+                          <CloseIcon />
+                        </span>
+                      </span>
+                    );
+                  })}
+                </div>
+                {showClear ? (
+                  <span
+                    className="cursor-pointer flex items-center shrink-0"
+                    onClick={handleClearAll}
+                  >
+                    <ClearAllIcon />
+                  </span>
+                ) : (
+                  <DropdownChevron open={open} />
+                )}
+              </>
+            ) : (
+              <>
+                <span className="text-[14px] text-[#999999] leading-[normal] truncate">
+                  {placeholder}
+                </span>
+                <DropdownChevron open={open} />
+              </>
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          className="!border-0 rounded-[8px] shadow-[0px_6px_16px_rgba(0,0,0,0.06)] p-[4px]"
+          portalContainer={portalContainer}
+        >
+          <div className="flex flex-col">
+            <button
+              type="button"
+              onClick={handleSelectAll}
+              className={cn(
+                'flex items-center gap-[6px] h-[34px] px-[10px] py-[7px] rounded-[4px] text-left',
+                'hover:bg-[#EFF0F6]',
+                transCls
+              )}
+            >
+              <SquareChecker
+                checked={allSelected}
+                intermediate={someSelected}
+                onCheckedChange={handleSelectAll}
+                className="shrink-0"
+              />
+              <span className="text-[14px] font-bold text-[#0265FF] leading-[normal]">
+                全选
+              </span>
+            </button>
+            {WeekdaysOptions.map((option) => {
+              const isSelected = value.includes(option.value);
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => handleToggle(option.value)}
+                  className={cn(
+                    'flex items-center gap-[6px] h-[34px] px-[10px] py-[7px] rounded-[4px] text-left',
+                    'hover:bg-[#EFF0F6]',
+                    transCls
+                  )}
+                >
+                  <SquareChecker
+                    checked={isSelected}
+                    onCheckedChange={() => handleToggle(option.value)}
+                    className="shrink-0"
+                  />
+                  <span className="text-[14px] text-[#030303] leading-[normal]">
+                    {option.label}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};

package/src/components/agent-scroll-selector.tsx

@@ -11,6 +11,7 @@ export interface AgentScrollSelectorProps {
   agents: Array<AgentSelectAgent>;
   activeAgent?: { id: string } | null;
   onSelect: (agent: AgentSelectAgent) => void | Promise<void>;
+  showSlider?: boolean;
   className?: string;
 }
 
@@ -19,6 +20,7 @@ export const AgentScrollSelector = ({
   activeAgent,
   onSelect,
   className,
+  showSlider,
 }: AgentScrollSelectorProps) => {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [canScrollLeft, setCanScrollLeft] = useState(false);
@@ -88,8 +90,8 @@ const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
     [onSelect]
   );
 
-  return (
-    <div className={cn('flex items-center gap-2.5 w-fit max-w-full min-w-0', className)}>
+  const slider = (
+    <>
       <IconBtn
         rounded
         disabled={!canScrollLeft}
@@ -140,7 +142,12 @@ const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
         }
         onClick={() => scroll('right')}
       />
+    </>
+  );
 
+  return (
+    <div className={cn('flex items-center gap-2.5 w-fit max-w-full min-w-0', className)}>
+      {showSlider ? slider : null}
       {agents.length > 0 && (
         <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
           <PopoverTrigger asChild>
@@ -159,7 +166,7 @@ const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {
               )}
             >
               <MenuLinesIcon />
-              <span>全部</span>
+              <span>技能</span>
             </button>
           </PopoverTrigger>
           <PopoverContent

package/src/components/agent-select.tsx

@@ -1,13 +1,9 @@
 import { useMemo, useState, useCallback } from 'react';
 import { cn } from '../lib/utils';
 import { transCls } from '../const/ui';
+import { type AgentShortSummary as AgentSelectAgent } from '@baishuyun/types';
 
-export interface AgentSelectAgent {
-  id: string;
-  name: string;
-  icon: string;
-  builtIn?: boolean;
-}
+export { type AgentSelectAgent };
 
 export interface AgentSelectProps {
   agents: Array<AgentSelectAgent>;
@@ -33,13 +29,13 @@ export const AgentSelect = ({
     const systemAgents = agents.filter((a) => a.builtIn);
     const customAgents = agents.filter((a) => !a.builtIn);
     return [
-      { label: '系统智能体', agents: systemAgents },
-      { label: '自定义智能体', agents: customAgents },
+      { label: '系统智能体助手', agents: systemAgents },
+      { label: '自定义智能体助手', agents: customAgents },
     ]
       .map((g) => ({
         ...g,
         agents: g.agents.filter((a) =>
-          a.name.toLowerCase().includes(searchQuery.toLowerCase())
+          a?.name?.toLowerCase().includes(searchQuery.toLowerCase())
         ),
       }))
       .filter((g) => g.agents.length > 0);
@@ -82,7 +78,7 @@ export const AgentSelect = ({
             </svg>
             <input
               type="text"
-              placeholder="搜索智能体"
+              placeholder="搜索智能体助手"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="h-full flex-1 bg-transparent text-[12px] text-[#121111] placeholder:text-[#999999] outline-none"
@@ -140,7 +136,7 @@ export const AgentSelect = ({
 
         {groups.length === 0 && (
           <div className="flex h-15 items-center justify-center text-[12px] text-[#999999]">
-            未找到相关智能体
+            未找到相关智能体助手
           </div>
         )}
       </div>