feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/agent-ide/tool/src/components/tool-item-action/actions/tool-item-action-card.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 { type ComponentProps, type FC } from 'react';
+
+import classNames from 'classnames';
+import { IconCozCardPencil } from '@coze-arch/coze-design/icons';
+
+import { ToolItemAction } from '..';
+
+type ToolItemActionCardProps = ComponentProps<typeof ToolItemAction>;
+
+export const ToolItemActionCard: FC<ToolItemActionCardProps> = props => {
+  const { disabled } = props;
+
+  return (
+    <ToolItemAction {...props}>
+      <IconCozCardPencil
+        className={classNames('text-sm', {
+          'coz-fg-secondary': !disabled,
+          'coz-fg-dim': disabled,
+        })}
+      />
+    </ToolItemAction>
+  );
+};

frontend/packages/agent-ide/tool/src/components/tool-item-action/actions/tool-item-action-copy.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { type ComponentProps, type FC } from 'react';
+
+import classNames from 'classnames';
+import { IconCozCopy } from '@coze-arch/coze-design/icons';
+
+import { ToolItemAction } from '..';
+
+type ToolItemActionCopyProps = ComponentProps<typeof ToolItemAction>;
+
+export const ToolItemActionCopy: FC<ToolItemActionCopyProps> = props => {
+  const { disabled } = props;
+  return (
+    <ToolItemAction {...props}>
+      <IconCozCopy
+        className={classNames('text-sm', {
+          'coz-fg-secondary': !disabled,
+          'coz-fg-dim': disabled,
+        })}
+      />
+    </ToolItemAction>
+  );
+};

frontend/packages/agent-ide/tool/src/components/tool-item-action/actions/tool-item-action-delete.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { type ComponentProps, type FC } from 'react';
+
+import classNames from 'classnames';
+import { IconCozTrashCan } from '@coze-arch/coze-design/icons';
+
+import { ToolItemAction } from '..';
+
+type ToolItemActionDeleteProps = ComponentProps<typeof ToolItemAction>;
+
+export const ToolItemActionDelete: FC<ToolItemActionDeleteProps> = props => {
+  const { disabled } = props;
+  return (
+    <ToolItemAction {...props}>
+      <IconCozTrashCan
+        className={classNames('text-sm', {
+          'coz-fg-secondary': !disabled,
+          'coz-fg-dim': disabled,
+        })}
+      />
+    </ToolItemAction>
+  );
+};

frontend/packages/agent-ide/tool/src/components/tool-item-action/actions/tool-item-action-drag.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 { type ComponentProps, type FC } from 'react';
+
+import classNames from 'classnames';
+import { IconCozHamburger } from '@coze-arch/coze-design/icons';
+
+import { ToolItemAction } from '..';
+
+type ToolItemActionEditProps = ComponentProps<typeof ToolItemAction> & {
+  isDragging: boolean;
+};
+
+export const ToolItemActionDrag: FC<ToolItemActionEditProps> = props => {
+  const { disabled, isDragging } = props;
+  return (
+    <ToolItemAction hoverStyle={false} {...props}>
+      <IconCozHamburger
+        className={classNames('text-sm', {
+          'coz-fg-secondary': !disabled,
+          'coz-fg-dim': disabled,
+          'cursor-grab': !isDragging,
+          'cursor-grabbing': isDragging,
+        })}
+      />
+    </ToolItemAction>
+  );
+};

frontend/packages/agent-ide/tool/src/components/tool-item-action/actions/tool-item-action-edit.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { type ComponentProps, type FC } from 'react';
+
+import classNames from 'classnames';
+import { IconCozEdit } from '@coze-arch/coze-design/icons';
+
+import { ToolItemAction } from '..';
+
+type ToolItemActionEditProps = ComponentProps<typeof ToolItemAction>;
+
+export const ToolItemActionEdit: FC<ToolItemActionEditProps> = props => {
+  const { disabled } = props;
+  return (
+    <ToolItemAction {...props}>
+      <IconCozEdit
+        className={classNames('text-sm', {
+          'coz-fg-secondary': !disabled,
+          'coz-fg-dim': disabled,
+        })}
+      />
+    </ToolItemAction>
+  );
+};

frontend/packages/agent-ide/tool/src/components/tool-item-action/actions/tool-item-action-info.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 { type ComponentProps, type FC } from 'react';
+
+import classNames from 'classnames';
+import { IconCozInfoCircle } from '@coze-arch/coze-design/icons';
+
+import { ToolItemAction } from '..';
+
+type ToolItemActionInfoProps = ComponentProps<typeof ToolItemAction>;
+
+export const ToolItemActionInfo: FC<ToolItemActionInfoProps> = props => {
+  const { disabled } = props;
+
+  return (
+    <ToolItemAction {...props}>
+      <IconCozInfoCircle
+        className={classNames('text-sm', {
+          'coz-fg-secondary': !disabled,
+          'coz-fg-dim': disabled,
+        })}
+      />
+    </ToolItemAction>
+  );
+};

frontend/packages/agent-ide/tool/src/components/tool-item-action/actions/tool-item-action-setting.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { type ComponentProps, type FC } from 'react';
+
+import classNames from 'classnames';
+import { IconCozSetting } from '@coze-arch/coze-design/icons';
+
+import { ToolItemAction } from '..';
+
+type ToolItemActionSettingProps = ComponentProps<typeof ToolItemAction>;
+
+export const ToolItemActionSetting: FC<ToolItemActionSettingProps> = props => {
+  const { disabled } = props;
+  return (
+    <ToolItemAction {...props}>
+      <IconCozSetting
+        className={classNames('text-sm', {
+          'coz-fg-secondary': !disabled,
+          'coz-fg-dim': disabled,
+        })}
+      />
+    </ToolItemAction>
+  );
+};

frontend/packages/agent-ide/tool/src/components/tool-item-action/index.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 { type FC, type PropsWithChildren, type MouseEventHandler } from 'react';
+
+import classNames from 'classnames';
+
+import { ToolTooltip } from '../tool-tooltip';
+import { type ToolButtonCommonProps } from '../../typings/button';
+
+type ToolItemActionProps = ToolButtonCommonProps & {
+  /** 是否展示hover样式 **/
+  hoverStyle?: boolean;
+};
+
+export const ToolItemAction: FC<PropsWithChildren<ToolItemActionProps>> = ({
+  children,
+  disabled,
+  tooltips,
+  onClick,
+  hoverStyle = true,
+  ...restProps
+}) => {
+  const handleClick: MouseEventHandler<HTMLDivElement> = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick?.();
+  };
+
+  return (
+    <ToolTooltip content={tooltips} disableFocusListener={disabled}>
+      <div
+        className={classNames(
+          'w-[24px] h-[24px] flex justify-center items-center rounded-mini',
+          {
+            'hover:coz-mg-secondary-hovered active:coz-mg-secondary-pressed cursor-pointer':
+              !disabled && hoverStyle,
+          },
+          {
+            'coz-fg-dim hover:coz-fg-dim active:coz-fg-dim cursor-not-allowed':
+              disabled,
+          },
+        )}
+        onClick={disabled ? undefined : handleClick}
+        data-testid={restProps['data-testid']}
+      >
+        {children}
+      </div>
+    </ToolTooltip>
+  );
+};