@baishuyun/ai-design 2.0.38 → 2.1.0-alpha.0

package/src/components/fields-design-info-table.tsx

@@ -1,160 +1,160 @@
-import { useState, useCallback, useMemo } from 'react';
-import { IFieldDesignInfo } from '@baishuyun/types';
-import { cn } from '../lib/utils';
-import { ChevronIcon } from './bs-icons';
-
-interface FieldsDesignInfoTableProps {
-  fields: IFieldDesignInfo[];
-}
-
-/** Group fields into top-level items and subform groups */
-function groupFields(fields: IFieldDesignInfo[]) {
-  const groups: Array<
-    | { kind: 'field'; field: IFieldDesignInfo }
-    | { kind: 'subform'; parent: IFieldDesignInfo; children: IFieldDesignInfo[] }
-  > = [];
-
-  let i = 0;
-  while (i < fields.length) {
-    const f = fields[i];
-    if (f.isSubForm) {
-      const children: IFieldDesignInfo[] = [];
-      let j = i + 1;
-      while (
-        j < fields.length &&
-        fields[j].isFieldInSubForm &&
-        fields[j].parentFormName === f.fieldName
-      ) {
-        children.push(fields[j]);
-        j++;
-      }
-      groups.push({ kind: 'subform', parent: f, children });
-      i = j;
-    } else {
-      groups.push({ kind: 'field', field: f });
-      i++;
-    }
-  }
-  return groups;
-}
-
-const cellCls = 'flex items-center px-1.5 py-2.5 text-xs leading-normal';
-
-function FieldRow({
-  field,
-  isSubFormChild = false,
-}: {
-  field: IFieldDesignInfo;
-  isSubFormChild?: boolean;
-}) {
-  return (
-    <div className="flex items-center w-full">
-      {/* 名称 */}
-      <div className={cn(cellCls, 'w-20 shrink-0 min-h-[34px]')}>
-        {isSubFormChild && (
-          <span className="inline-flex items-center justify-center shrink-0 w-5 h-5 opacity-0">
-            <ChevronIcon />
-          </span>
-        )}
-        <span>{field.fieldName}</span>
-      </div>
-      {/* 类型 */}
-      <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px]')}>
-        {field.type}
-      </div>
-      {/* 必填 */}
-      <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px]')}>
-        {field.required ? '是' : '否'}
-      </div>
-      {/* 说明 */}
-      <div className={cn(cellCls, 'flex-1 min-w-0 min-h-[34px]')}>
-        <span className="break-words min-w-0">{field.description}</span>
-      </div>
-    </div>
-  );
-}
-
-function SubFormGroup({
-  parent,
-  children,
-}: {
-  parent: IFieldDesignInfo;
-  children: IFieldDesignInfo[];
-}) {
-  const [isOpen, setIsOpen] = useState(true);
-  const toggle = useCallback(() => setIsOpen((v) => !v), []);
-
-  return (
-    <>
-      {/* 子表单 parent row */}
-      <div className="flex items-center w-full">
-        {/* 名称 */}
-        <div className={cn(cellCls, 'w-20 shrink-0 min-h-[34px]')}>
-          <button
-            type="button"
-            onClick={toggle}
-            className="inline-flex items-center justify-center shrink-0 w-5 h-5 rounded cursor-pointer text-[#666] relative -left-[2px]"
-          >
-            <ChevronIcon isOpen={isOpen} />
-          </button>
-          <span>{parent.fieldName}</span>
-        </div>
-        {/* 类型 */}
-        <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px] ')}>
-          {parent.type}
-        </div>
-        {/* 必填 */}
-        <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px]')}>
-          {parent.required ? '是' : '否'}
-        </div>
-        {/* 说明 */}
-        <div className={cn(cellCls, 'flex-1 min-w-0 min-h-[34px]')}>
-          <span className="break-words min-w-0">{parent.description}</span>
-        </div>
-      </div>
-
-      {/* 子表单 children */}
-      {isOpen && children.map((child, idx) => <FieldRow key={idx} field={child} isSubFormChild />)}
-    </>
-  );
-}
-
-export function FieldsDesignInfoTable({ fields }: FieldsDesignInfoTableProps) {
-  const groups = useMemo(() => groupFields(fields), [fields]);
-
-  return (
-    <div className="flex flex-col items-start w-full bg-white rounded-[10px] overflow-hidden text-black my-[10px] border border-[#E0E0E0]">
-      {/* 表头 */}
-      <div className="flex items-center w-full shrink-0 bg-[#E5E6EB] rounded-t-[10px] border-b border-[#E0E0E0]">
-        <div className={cn(cellCls, 'w-20 shrink-0 h-[34px] font-bold')}>
-          名称
-        </div>
-        <div className={cn(cellCls, 'w-[72px] shrink-0 h-[34px] font-bold')}>
-          类型
-        </div>
-        <div
-          className={cn(
-            cellCls,
-            'w-9 shrink-0 h-[34px] font-bold justify-center'
-          )}
-        >
-          必填
-        </div>
-        <div className={cn(cellCls, 'flex-1 min-w-0 h-[34px] font-bold')}>
-          说明
-        </div>
-      </div>
-
-      {/* 表体 */}
-      <div className="flex flex-col items-start w-full">
-        {groups.map((g, idx) =>
-          g.kind === 'field' ? (
-            <FieldRow key={idx} field={g.field} />
-          ) : (
-            <SubFormGroup key={idx} parent={g.parent} children={g.children} />
-          )
-        )}
-      </div>
-    </div>
-  );
-}
+import { useState, useCallback, useMemo } from 'react';
+import { IFieldDesignInfo } from '@baishuyun/types';
+import { cn } from '../lib/utils';
+import { ChevronIcon } from './bs-icons';
+
+interface FieldsDesignInfoTableProps {
+  fields: IFieldDesignInfo[];
+}
+
+/** Group fields into top-level items and subform groups */
+function groupFields(fields: IFieldDesignInfo[]) {
+  const groups: Array<
+    | { kind: 'field'; field: IFieldDesignInfo }
+    | { kind: 'subform'; parent: IFieldDesignInfo; children: IFieldDesignInfo[] }
+  > = [];
+
+  let i = 0;
+  while (i < fields.length) {
+    const f = fields[i];
+    if (f.isSubForm) {
+      const children: IFieldDesignInfo[] = [];
+      let j = i + 1;
+      while (
+        j < fields.length &&
+        fields[j].isFieldInSubForm &&
+        fields[j].parentFormName === f.fieldName
+      ) {
+        children.push(fields[j]);
+        j++;
+      }
+      groups.push({ kind: 'subform', parent: f, children });
+      i = j;
+    } else {
+      groups.push({ kind: 'field', field: f });
+      i++;
+    }
+  }
+  return groups;
+}
+
+const cellCls = 'flex items-center px-1.5 py-2.5 text-xs leading-normal';
+
+function FieldRow({
+  field,
+  isSubFormChild = false,
+}: {
+  field: IFieldDesignInfo;
+  isSubFormChild?: boolean;
+}) {
+  return (
+    <div className="flex items-center w-full">
+      {/* 名称 */}
+      <div className={cn(cellCls, 'w-20 shrink-0 min-h-[34px]')}>
+        {isSubFormChild && (
+          <span className="inline-flex items-center justify-center shrink-0 w-5 h-5 opacity-0">
+            <ChevronIcon />
+          </span>
+        )}
+        <span>{field.fieldName}</span>
+      </div>
+      {/* 类型 */}
+      <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px]')}>
+        {field.type}
+      </div>
+      {/* 必填 */}
+      <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px]')}>
+        {field.required ? '是' : '否'}
+      </div>
+      {/* 说明 */}
+      <div className={cn(cellCls, 'flex-1 min-w-0 min-h-[34px]')}>
+        <span className="break-words min-w-0">{field.description}</span>
+      </div>
+    </div>
+  );
+}
+
+function SubFormGroup({
+  parent,
+  children,
+}: {
+  parent: IFieldDesignInfo;
+  children: IFieldDesignInfo[];
+}) {
+  const [isOpen, setIsOpen] = useState(true);
+  const toggle = useCallback(() => setIsOpen((v) => !v), []);
+
+  return (
+    <>
+      {/* 子表单 parent row */}
+      <div className="flex items-center w-full">
+        {/* 名称 */}
+        <div className={cn(cellCls, 'w-20 shrink-0 min-h-[34px]')}>
+          <button
+            type="button"
+            onClick={toggle}
+            className="inline-flex items-center justify-center shrink-0 w-5 h-5 rounded cursor-pointer text-[#666] relative -left-[2px]"
+          >
+            <ChevronIcon isOpen={isOpen} />
+          </button>
+          <span>{parent.fieldName}</span>
+        </div>
+        {/* 类型 */}
+        <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px] ')}>
+          {parent.type}
+        </div>
+        {/* 必填 */}
+        <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px]')}>
+          {parent.required ? '是' : '否'}
+        </div>
+        {/* 说明 */}
+        <div className={cn(cellCls, 'flex-1 min-w-0 min-h-[34px]')}>
+          <span className="break-words min-w-0">{parent.description}</span>
+        </div>
+      </div>
+
+      {/* 子表单 children */}
+      {isOpen && children.map((child, idx) => <FieldRow key={idx} field={child} isSubFormChild />)}
+    </>
+  );
+}
+
+export function FieldsDesignInfoTable({ fields }: FieldsDesignInfoTableProps) {
+  const groups = useMemo(() => groupFields(fields), [fields]);
+
+  return (
+    <div className="flex flex-col items-start w-full bg-white rounded-[10px] overflow-hidden text-black my-[10px] border border-[#E0E0E0]">
+      {/* 表头 */}
+      <div className="flex items-center w-full shrink-0 bg-[#E5E6EB] rounded-t-[10px] border-b border-[#E0E0E0]">
+        <div className={cn(cellCls, 'w-20 shrink-0 h-[34px] font-bold')}>
+          名称
+        </div>
+        <div className={cn(cellCls, 'w-[72px] shrink-0 h-[34px] font-bold')}>
+          类型
+        </div>
+        <div
+          className={cn(
+            cellCls,
+            'w-9 shrink-0 h-[34px] font-bold justify-center'
+          )}
+        >
+          必填
+        </div>
+        <div className={cn(cellCls, 'flex-1 min-w-0 h-[34px] font-bold')}>
+          说明
+        </div>
+      </div>
+
+      {/* 表体 */}
+      <div className="flex flex-col items-start w-full">
+        {groups.map((g, idx) =>
+          g.kind === 'field' ? (
+            <FieldRow key={idx} field={g.field} />
+          ) : (
+            <SubFormGroup key={idx} parent={g.parent} children={g.children} />
+          )
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/fields-generating-indicator.tsx

@@ -1,95 +1,95 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { BorderColorAnimation } from './border-color-animation';
-import { MagicIcon } from './bs-icons';
-
-export const DotAnimation = () => {
-  return (
-    <>
-      <div className="flex gap-[2px] flex-shrink-0 relative -left-[4px] top-[3px]">
-        <div
-          className="w-[2px] h-[2px] rounded-full bg-[#0265FF] flex-shrink-0"
-          style={{
-            animation: 'pulse 1.4s ease-in-out infinite',
-            animationDelay: '0s',
-            marginRight: '2px',
-          }}
-        />
-        <div
-          className="w-[2px] h-[2px] rounded-full bg-[#0265FF] flex-shrink-0"
-          style={{
-            animation: 'pulse 1.4s ease-in-out infinite',
-            animationDelay: '0.2s',
-            marginRight: '2px',
-          }}
-        />
-        <div
-          className="w-[2px] h-[2px] rounded-full bg-[#0265FF] flex-shrink-0"
-          style={{
-            animation: 'pulse 1.4s ease-in-out infinite',
-            animationDelay: '0.4s',
-          }}
-        />
-      </div>
-      <style>{`
-        @keyframes pulse {
-          0%, 60%, 100% {
-            opacity: 0.3;
-            transform: scale(1);
-          }
-          30% {
-            opacity: 1;
-            transform: scale(1.2);
-          }
-        }
-      `}</style>
-    </>
-  );
-};
-
-export const FieldsGeneratingIndicator = ({
-  children,
-  loading = true,
-}: {
-  children?: React.ReactNode;
-  loading?: boolean;
-}) => {
-  const paddingAndGap = 16 * 2 + 6; // padding + gap
-  const animationWidth = loading ? 14 : 0;
-  const magicIconWidth = 16;
-  const textRef = useRef<HTMLSpanElement>(null);
-  const [textWidth, setWidth] = useState(0);
-
-  // get text width + padding + gap
-  const fullWidth = textWidth + paddingAndGap + animationWidth + magicIconWidth;
-
-  // when text changes, update width
-  useLayoutEffect(() => {
-    if (textRef.current) {
-      const rect = textRef.current.getBoundingClientRect();
-      setWidth(rect.width);
-    }
-  }, [children]);
-
-  // when text not change, get init width
-  useEffect(() => {
-    if (textRef.current) {
-      const rect = textRef.current.getBoundingClientRect();
-      console.log('rect.width', rect.width);
-      setWidth(rect.width);
-    }
-  }, []);
-
-  return (
-    <BorderColorAnimation borderRadius={100} width={fullWidth} height={34} borderWidth={1}>
-      <div className="flex items-center gap-[6px] h-[31px] ml-[16px]">
-        <div className="shrink-0">
-          <MagicIcon />
-        </div>
-        <span className="text-[14px] text-[#0265FF] shrink-0" ref={textRef}>
-          {children || '字段生成中'}
-        </span>
-        {loading && <DotAnimation />}
-      </div>
-    </BorderColorAnimation>
-  );
-};
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { BorderColorAnimation } from './border-color-animation';
+import { MagicIcon } from './bs-icons';
+
+export const DotAnimation = () => {
+  return (
+    <>
+      <div className="flex gap-[2px] flex-shrink-0 relative -left-[4px] top-[3px]">
+        <div
+          className="w-[2px] h-[2px] rounded-full bg-[#0265FF] flex-shrink-0"
+          style={{
+            animation: 'pulse 1.4s ease-in-out infinite',
+            animationDelay: '0s',
+            marginRight: '2px',
+          }}
+        />
+        <div
+          className="w-[2px] h-[2px] rounded-full bg-[#0265FF] flex-shrink-0"
+          style={{
+            animation: 'pulse 1.4s ease-in-out infinite',
+            animationDelay: '0.2s',
+            marginRight: '2px',
+          }}
+        />
+        <div
+          className="w-[2px] h-[2px] rounded-full bg-[#0265FF] flex-shrink-0"
+          style={{
+            animation: 'pulse 1.4s ease-in-out infinite',
+            animationDelay: '0.4s',
+          }}
+        />
+      </div>
+      <style>{`
+        @keyframes pulse {
+          0%, 60%, 100% {
+            opacity: 0.3;
+            transform: scale(1);
+          }
+          30% {
+            opacity: 1;
+            transform: scale(1.2);
+          }
+        }
+      `}</style>
+    </>
+  );
+};
+
+export const FieldsGeneratingIndicator = ({
+  children,
+  loading = true,
+}: {
+  children?: React.ReactNode;
+  loading?: boolean;
+}) => {
+  const paddingAndGap = 16 * 2 + 6; // padding + gap
+  const animationWidth = loading ? 14 : 0;
+  const magicIconWidth = 16;
+  const textRef = useRef<HTMLSpanElement>(null);
+  const [textWidth, setWidth] = useState(0);
+
+  // get text width + padding + gap
+  const fullWidth = textWidth + paddingAndGap + animationWidth + magicIconWidth;
+
+  // when text changes, update width
+  useLayoutEffect(() => {
+    if (textRef.current) {
+      const rect = textRef.current.getBoundingClientRect();
+      setWidth(rect.width);
+    }
+  }, [children]);
+
+  // when text not change, get init width
+  useEffect(() => {
+    if (textRef.current) {
+      const rect = textRef.current.getBoundingClientRect();
+      console.log('rect.width', rect.width);
+      setWidth(rect.width);
+    }
+  }, []);
+
+  return (
+    <BorderColorAnimation borderRadius={100} width={fullWidth} height={34} borderWidth={1}>
+      <div className="flex items-center gap-[6px] h-[31px] ml-[16px]">
+        <div className="shrink-0">
+          <MagicIcon />
+        </div>
+        <span className="text-[14px] text-[#0265FF] shrink-0" ref={textRef}>
+          {children || '字段生成中'}
+        </span>
+        {loading && <DotAnimation />}
+      </div>
+    </BorderColorAnimation>
+  );
+};

package/src/components/fields-portal.tsx

@@ -1,18 +1,18 @@
-import { useShadow } from '../hooks/use-shadow';
-import { createPortal } from 'react-dom';
-import { FieldsPreviewer, FieldsPreviewerProps } from './fields-previewer';
-import { ReactPortal } from 'react';
-
-export interface FieldsPortalProps extends FieldsPreviewerProps {
-  portalEl: HTMLElement;
-  children?: React.ReactNode;
-}
-
-export const FieldsPortal = ({ portalEl, children, ...rest }: FieldsPortalProps): ReactPortal => {
-  const { shadowContainer: shadowEntry } = useShadow({
-    rootEl: portalEl,
-    id: 'chat-sdk-fields-portal',
-  });
-
-  return createPortal(<FieldsPreviewer {...rest}>{children}</FieldsPreviewer>, shadowEntry!);
-};
+import { useShadow } from '../hooks/use-shadow';
+import { createPortal } from 'react-dom';
+import { FieldsPreviewer, FieldsPreviewerProps } from './fields-previewer';
+import { ReactPortal } from 'react';
+
+export interface FieldsPortalProps extends FieldsPreviewerProps {
+  portalEl: HTMLElement;
+  children?: React.ReactNode;
+}
+
+export const FieldsPortal = ({ portalEl, children, ...rest }: FieldsPortalProps): ReactPortal => {
+  const { shadowContainer: shadowEntry } = useShadow({
+    rootEl: portalEl,
+    id: 'chat-sdk-fields-portal',
+  });
+
+  return createPortal(<FieldsPreviewer {...rest}>{children}</FieldsPreviewer>, shadowEntry!);
+};