dify

dify/web/app/components/base/copy-feedback/index.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import CopyFeedback, { CopyFeedbackNew } from '.'
+
+const meta = {
+  title: 'Base/Feedback/CopyFeedback',
+  component: CopyFeedback,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Copy-to-clipboard button that shows instant feedback and a tooltip. Includes the original ActionButton wrapper and the newer ghost-button variant.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  args: {
+    content: 'acc-3f92fa',
+  },
+} satisfies Meta<typeof CopyFeedback>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const CopyDemo = ({ content }: { content: string }) => {
+  const [value] = useState(content)
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2 text-sm text-text-secondary">
+        <span>Client ID:</span>
+        <span className="rounded bg-background-default-subtle px-2 py-1 font-mono text-xs text-text-primary">{value}</span>
+        <CopyFeedback content={value} />
+      </div>
+      <div className="flex items-center gap-2 text-sm text-text-secondary">
+        <span>Use the new ghost variant:</span>
+        <CopyFeedbackNew content={value} />
+      </div>
+    </div>
+  )
+}
+
+export const Playground: Story = {
+  render: args => <CopyDemo content={args.content} />,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<CopyFeedback content="acc-3f92fa" />
+<CopyFeedbackNew content="acc-3f92fa" />
+        `.trim(),
+      },
+    },
+  },
+}

dify/web/app/components/base/copy-feedback/index.tsx

@@ -0,0 +1,91 @@
+'use client'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiClipboardFill,
+  RiClipboardLine,
+} from '@remixicon/react'
+import { debounce } from 'lodash-es'
+import copy from 'copy-to-clipboard'
+import copyStyle from './style.module.css'
+import Tooltip from '@/app/components/base/tooltip'
+import ActionButton from '@/app/components/base/action-button'
+
+type Props = {
+  content: string
+  className?: string
+}
+
+const prefixEmbedded = 'appOverview.overview.appInfo.embedded'
+
+const CopyFeedback = ({ content }: Props) => {
+  const { t } = useTranslation()
+  const [isCopied, setIsCopied] = useState<boolean>(false)
+
+  const onClickCopy = debounce(() => {
+    copy(content)
+    setIsCopied(true)
+  }, 100)
+
+  const onMouseLeave = debounce(() => {
+    setIsCopied(false)
+  }, 100)
+
+  return (
+    <Tooltip
+      popupContent={
+        (isCopied
+          ? t(`${prefixEmbedded}.copied`)
+          : t(`${prefixEmbedded}.copy`)) || ''
+      }
+    >
+      <ActionButton>
+        <div
+          onClick={onClickCopy}
+          onMouseLeave={onMouseLeave}
+        >
+          {isCopied && <RiClipboardFill className='h-4 w-4' />}
+          {!isCopied && <RiClipboardLine className='h-4 w-4' />}
+        </div>
+      </ActionButton>
+    </Tooltip>
+  )
+}
+
+export default CopyFeedback
+
+export const CopyFeedbackNew = ({ content, className }: Pick<Props, 'className' | 'content'>) => {
+  const { t } = useTranslation()
+  const [isCopied, setIsCopied] = useState<boolean>(false)
+
+  const onClickCopy = debounce(() => {
+    copy(content)
+    setIsCopied(true)
+  }, 100)
+
+  const onMouseLeave = debounce(() => {
+    setIsCopied(false)
+  }, 100)
+
+  return (
+    <Tooltip
+      popupContent={
+        (isCopied
+          ? t(`${prefixEmbedded}.copied`)
+          : t(`${prefixEmbedded}.copy`)) || ''
+      }
+    >
+      <div
+        className={`h-8 w-8 cursor-pointer rounded-lg hover:bg-components-button-ghost-bg-hover ${className ?? ''
+        }`}
+      >
+        <div
+          onClick={onClickCopy}
+          onMouseLeave={onMouseLeave}
+          className={`h-full w-full ${copyStyle.copyIcon} ${isCopied ? copyStyle.copied : ''
+          }`}
+        ></div>
+      </div>
+    </Tooltip>
+  )
+}

dify/web/app/components/base/copy-feedback/style.module.css

@@ -0,0 +1,15 @@
+.copyIcon {
+  background-image: url(~@/app/components/develop/secret-key/assets/copy.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.copyIcon:hover {
+  background-image: url(~@/app/components/develop/secret-key/assets/copy-hover.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.copyIcon.copied {
+  background-image: url(~@/app/components/develop/secret-key/assets/copied.svg);
+}