@fudanda/workflow 0.0.0-stage → 1.20261015.1-beta.1

package/vendor/coze/source/prompt-kit/input-slot-widget/index.css

@@ -0,0 +1,34 @@
+
+.cm-content {
+  .slot-content {
+    color: #4E40E5;
+    word-break: break-all;
+    background-color: rgba(186, 192, 255, 20%);
+
+    /* padding: 2px 0; */
+  }
+
+  .slot-side-left {
+    /* padding: 2px 0 2px 5px; */
+    padding-left: 5px;
+    background-color: rgba(186, 192, 255, 20%);
+    border-radius: 4px 0 0 4px;
+  }
+
+  .slot-side-right {
+    margin-right: 4px;
+
+    /* padding: 2px 5px 2px 0; */
+    padding-right: 5px;
+    background-color: rgba(186, 192, 255, 20%);
+    border-radius: 0 5px 5px 0;
+  }
+
+  .slot-placeholder {
+    color: rgba(148, 152, 247, 70%);
+    word-break: break-all;
+    background-color: rgba(186, 192, 255, 20%);
+
+    /* padding: 2px 0; */
+  }
+}

package/vendor/coze/source/prompt-kit/input-slot-widget/index.ts

@@ -0,0 +1,169 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ConfigModeWidgetPopover } from './config-mode-popover';
+
+import './index.css';
+import { useEffect, useLayoutEffect } from 'react';
+
+import { useEditor, useInjector } from '@coze-editor/editor/react';
+import { type EditorAPI } from '@coze-editor/editor/preset-prompt';
+import {
+  astDecorator,
+  SpanWidget,
+  autoSelectRanges,
+  selectionEnlarger,
+  deletionEnlarger,
+} from '@coze-editor/editor';
+import { type ViewUpdate } from '@codemirror/view';
+
+import {
+  type MarkRangeInfo,
+  TemplateParser,
+} from '../../shared/utils/template-parser';
+import { useReadonly } from '../../shared/hooks/use-editor-readonly';
+interface InputSlotWidgetProps {
+  mode?: 'input' | 'configurable';
+  onSelectionInInputSlot?: (selection: MarkRangeInfo | undefined) => void;
+}
+
+const templateParser = new TemplateParser({ mark: 'InputSlot' });
+
+export const InputSlotWidget = (props: InputSlotWidgetProps) => {
+  const { mode, onSelectionInInputSlot } = props;
+  const injector = useInjector();
+  const editor = useEditor<EditorAPI>();
+  const readonly = useReadonly();
+
+  useLayoutEffect(() => {
+    const { markInfoField } = templateParser;
+
+    return injector.inject([
+      astDecorator.whole.of((cursor, state) => {
+        if (templateParser.isOpenNode(cursor.node, state)) {
+          const open = cursor.node;
+          const close = templateParser.findCloseNode(open, state);
+
+          if (close) {
+            const openTemplate = state.sliceDoc(open.from, open.to);
+            const data = templateParser.getData(openTemplate);
+            const from = open.to;
+            const to = close.from;
+
+            if (from === to) {
+              return [
+                {
+                  type: 'replace',
+                  widget: new SpanWidget({
+                    className: 'slot-side-left',
+                  }),
+                  atomicRange: true,
+                  from: open.from,
+                  to: open.to,
+                },
+                {
+                  type: 'widget',
+                  widget: new SpanWidget({
+                    text: data?.placeholder || '',
+                    className: 'slot-placeholder',
+                  }),
+                  from,
+                  atomicRange: true,
+                  side: 1,
+                },
+                {
+                  type: 'replace',
+                  widget: new SpanWidget({
+                    className: 'slot-side-right',
+                  }),
+                  atomicRange: true,
+                  from: close.from,
+                  to: close.to,
+                },
+              ];
+            }
+            return [
+              {
+                type: 'replace',
+                widget: new SpanWidget({
+                  className: 'slot-side-left',
+                }),
+                atomicRange: true,
+                from: open.from,
+                to: open.to,
+              },
+              {
+                type: 'className',
+                className: 'slot-content',
+                from,
+                to,
+              },
+              {
+                type: 'replace',
+                widget: new SpanWidget({ className: 'slot-side-right' }),
+                atomicRange: true,
+                from: close.from,
+                to: close.to,
+              },
+            ];
+          }
+        }
+      }),
+
+      markInfoField,
+
+      autoSelectRanges.of(state => state.field(markInfoField).contents),
+
+      selectionEnlarger.of(state => state.field(markInfoField).specs),
+
+      deletionEnlarger.of(state => state.field(markInfoField).specs),
+    ]);
+  }, [injector]);
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    const handleViewUpdate = (update: ViewUpdate) => {
+      if (!update.state.selection.main.empty) {
+        const markRangeInfo = templateParser.getSelectionInMarkNodeRange(
+          update.state.selection.main,
+          update.state,
+        );
+        if (markRangeInfo) {
+          onSelectionInInputSlot?.(markRangeInfo);
+          return;
+        }
+        onSelectionInInputSlot?.(undefined);
+      }
+    };
+    editor.$on('viewUpdate', handleViewUpdate);
+    return () => {
+      editor.$off('viewUpdate', handleViewUpdate);
+    };
+  }, [editor]);
+
+  if (mode === 'configurable' && !readonly) {
+    return (
+      <ConfigModeWidgetPopover
+        direction="bottomLeft"
+        templateParser={templateParser}
+      />
+    );
+  }
+
+  return null;
+};

package/vendor/coze/source/prompt-kit/library-item.tsx

@@ -0,0 +1,141 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState } from 'react';
+
+import cls from 'classnames';
+import { ActionKey } from '@coze-arch/idl/resource';
+import { type ResourceAction } from '@coze-arch/idl/plugin_develop';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozMore } from '@coze-arch/coze-design/icons';
+import { Tooltip, Typography } from '@coze-arch/coze-design';
+const { Text } = Typography;
+
+export interface LibraryItemProps {
+  id: string;
+  title: string;
+  description: string;
+  isSelected?: boolean;
+  onActive?: (id: string) => void;
+  actions?: ResourceAction[];
+  onDeleteAction?: (id: string) => void;
+  onEditAction?: (id: string) => void;
+}
+const actionsMap: {
+  [key in ActionKey.Delete | ActionKey.Edit]: string;
+} = {
+  [ActionKey.Delete]: I18n.t('Delete'),
+  [ActionKey.Edit]: I18n.t('Edit'),
+};
+
+export const LibraryItem = ({
+  id,
+  title,
+  description,
+  actions,
+  isSelected,
+  onActive,
+  onDeleteAction,
+  onEditAction,
+}: LibraryItemProps) => {
+  const [isHover, setIsHover] = useState(false);
+  const handleActions = (action: ActionKey) => {
+    if (action === ActionKey.Delete) {
+      onDeleteAction?.(id);
+      return;
+    }
+    if (action === ActionKey.Edit) {
+      onEditAction?.(id);
+    }
+  };
+  return (
+    <>
+      <div
+        className={cls(
+          'w-full flex flex-row justify-between items-center overflow-hidden px-3 h-[64px]',
+          'relative',
+          'after:content-[""] after:absolute after:left-0 after:right-0',
+          'after:bottom-0 after:h-[1px] after:coz-mg-primary',
+          'hover:coz-mg-secondary-hovered hover:rounded hover:after:hidden',
+          'cursor-pointer',
+          {
+            'rounded coz-mg-primary after:hidden': isSelected,
+          },
+        )}
+        onClick={() => {
+          onActive?.(id);
+        }}
+        onMouseEnter={() => {
+          setIsHover(true);
+        }}
+        onMouseLeave={() => {
+          setIsHover(false);
+        }}
+      >
+        <div className="flex flex-1 min-w-[0px] w-0 flex-col gap-[2px]">
+          <Text className="text-lg flex-1 font-medium" ellipsis>
+            {title}
+          </Text>
+          <Text
+            className="text-base"
+            ellipsis={{
+              rows: 1,
+              showTooltip: {
+                opts: {
+                  position: 'right',
+                },
+              },
+            }}
+          >
+            {description}
+          </Text>
+        </div>
+        <Tooltip
+          position="bottom"
+          className="!p-1"
+          content={
+            <div className="flex flex-col gap-[2px] w-[120px]">
+              {actions
+                ?.filter(action => action.enable)
+                ?.filter(action => action.key in actionsMap)
+                .map(action => (
+                  <div
+                    key={action.key}
+                    onClick={() => handleActions(action.key as ActionKey)}
+                    className="w-full text-sm h-[32px] p-2 flex items-center cursor-pointer hover:coz-mg-primary-hovered hover:rounded-mini"
+                  >
+                    {actionsMap[action.key as keyof typeof actionsMap]}
+                  </div>
+                ))}
+            </div>
+          }
+        >
+          <div
+            className={cls(
+              'w-6 h-6 rounded-little coz-mg-secondary-hovered flex items-center justify-center',
+              {
+                hidden: !actions?.length || !isHover,
+              },
+            )}
+            onClick={e => e.stopPropagation()}
+          >
+            <IconCozMore />
+          </div>
+        </Tooltip>
+      </div>
+    </>
+  );
+};

package/vendor/coze/source/prompt-kit/prompt-info-input.tsx

@@ -0,0 +1,90 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useState, type ComponentProps } from 'react';
+
+import { withField, FormInput, FormTextArea } from '@coze-arch/coze-design';
+
+interface PromptInfoInputProps {
+  readonly?: boolean;
+  initCount?: number;
+  value?: string;
+  disabled?: boolean;
+  rows?: number;
+  field: string;
+  label?: string;
+  placeholder?: string;
+  maxLength?: number;
+  maxCount?: number;
+  rules?: ComponentProps<typeof FormInput>['rules'];
+}
+
+export const PromptInfoInput = (props: PromptInfoInputProps) => {
+  const { initCount, disabled, rows } = props;
+  const [count, setCount] = useState(initCount || 0);
+
+  const handleChange = (v: string) => {
+    setCount(v.length);
+  };
+
+  useEffect(() => {
+    setCount(initCount || 0);
+  }, [initCount]);
+
+  const countSuffix = (
+    <div className="overflow-hidden coz-fg-secondary text-sm pr-[9px]">{`${count}/${props.maxCount}`}</div>
+  );
+
+  if (disabled) {
+    return <ReadonlyInput {...props} />;
+  }
+
+  if (rows && rows > 1) {
+    return (
+      <FormTextArea
+        {...props}
+        autosize
+        autoComplete="off"
+        onChange={(value: string) => handleChange(value)}
+      />
+    );
+  }
+
+  return (
+    <FormInput
+      {...props}
+      autoComplete="off"
+      suffix={countSuffix}
+      onChange={value => handleChange(value)}
+    />
+  );
+};
+
+const ReadonlyInputCom = (props: PromptInfoInputProps) => {
+  const { value } = props;
+  return (
+    <div className="w-full">
+      <div className="coz-fg-secondary text-base break-all whitespace-pre-line">
+        {value}
+      </div>
+    </div>
+  );
+};
+
+const ReadonlyInput = withField(ReadonlyInputCom, {
+  valueKey: 'value',
+  onKeyChangeFnName: 'onChange',
+});

package/vendor/coze/source/ui-components/add-operation/index.module.less

@@ -0,0 +1,19 @@
+.container {
+  .icon {
+    color: #4d53e8;
+
+    &>svg {
+      color: #4d53e8;
+    }
+  }
+}
+
+.disabled {
+  .icon {
+    color: var(--light-usage-disabled-color-disabled-text, rgb(28 31 35 / 35%));
+
+    &>svg {
+      color: var(--light-usage-disabled-color-disabled-text, rgb(28 31 35 / 35%));
+    }
+  }
+}

package/vendor/coze/source/ui-components/add-operation/index.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import classNames from 'classnames';
+import { IconCozAddNode } from '@coze-arch/coze-design/icons';
+import { IconButton, type ButtonProps } from '@coze-arch/coze-design';
+import { IconAdd } from '@coze-arch/bot-icons';
+
+import styles from './index.module.less';
+
+type AddOperationProps = React.PropsWithChildren<{
+  readonly?: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+  subitem?: boolean;
+  size?: ButtonProps['size'];
+  color?: ButtonProps['color'];
+}>;
+
+export default function AddOperation({
+  readonly,
+  onClick,
+  className,
+  style,
+  disabled,
+  subitem = false,
+  size,
+  color,
+  ...restProps
+}: AddOperationProps) {
+  if (readonly) {
+    return null;
+  }
+  return (
+    <IconButton
+      data-testid={restProps['data-testid']}
+      onClick={onClick}
+      className={classNames(
+        styles.container,
+        disabled ? styles.disabled : null,
+        className,
+      )}
+      style={style}
+      icon={subitem ? <IconCozAddNode /> : <IconAdd className={styles.icon} />}
+      disabled={disabled}
+      size={size}
+      color={color}
+    />
+  );
+}

package/vendor/coze/source/ui-components/auto-size-tooltip/index.module.less

@@ -0,0 +1,39 @@
+/* stylelint-disable declaration-no-important */
+.popup_container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  .nano {
+    pointer-events: none;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    align-self: stretch;
+
+    width: 100%;
+    height: 100%;
+
+    :global {
+      .semi-portal-inner {
+        left: 50% !important;
+      }
+    }
+  }
+}
+
+.tooltip {
+  &.top-level {
+    max-width: 400px;
+
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 22px;
+    word-break: break-word;
+
+    border-radius: 6px;
+  }
+}

package/vendor/coze/source/ui-components/auto-size-tooltip/index.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { type PropsWithChildren, useRef } from 'react';
+
+import classNames from 'classnames';
+import { Tooltip, type TooltipProps } from '@coze-arch/coze-design';
+
+import styles from './index.module.less';
+
+type AutoSizeTooltipProps = PropsWithChildren<
+  {
+    className?: string;
+    style?: React.CSSProperties;
+    containerClassName?: string;
+    containerStyle?: React.CSSProperties;
+    tooltipClassName?: string;
+    tooltipStyle?: React.CSSProperties;
+  } & Omit<TooltipProps, 'className' | 'style'>
+>;
+
+export default function AutoSizeTooltip({
+  children,
+  className,
+  style,
+  tooltipClassName,
+  tooltipStyle,
+  containerClassName,
+  containerStyle,
+  ...rest
+}: AutoSizeTooltipProps) {
+  const nanoRef = useRef<HTMLDivElement | null>(null);
+  const renderContent = () => (
+    <>
+      <div
+        ref={nanoRef}
+        className={classNames(styles.nano, containerClassName)}
+        style={containerStyle}
+      />
+      <Tooltip
+        {...rest}
+        className={classNames(
+          styles.tooltip,
+          styles['top-level'],
+          tooltipClassName,
+        )}
+        style={{ left: 0, ...tooltipStyle }}
+      >
+        {children}
+      </Tooltip>
+    </>
+  );
+  return (
+    <div
+      className={classNames(styles.popup_container, className)}
+      style={style}
+    >
+      {renderContent()}
+    </div>
+  );
+}

package/vendor/coze/source/ui-components/workflow-sl-input/index.module.less

@@ -0,0 +1,36 @@
+.input-wrapper {
+  width: 100%;
+  span {
+    width: 100%;
+  }
+}
+.error-content {
+  height: 20px;
+}
+.error-float {
+  width: 100%;
+  position: absolute;
+}
+.error-text {
+  font-size: 12px;
+  padding-top: 2px;
+  padding-left: 12px;
+  color: @error-red;
+  position: absolute;
+}
+.input {
+  input {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+.limit-count {
+  padding-left: 8px;
+  padding-right: 12px;
+  overflow: hidden;
+  color: var(--light-usage-text-color-text-3, rgba(28, 31, 35, 0.35));
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}