Copy Text

The CopyText component provides a convenient way to copy text to the clipboard with a built-in copy button and visual feedback. It displays the text with a copy icon that changes to a checkmark when the text is successfully copied.

import { CopyText } from "@pipecat-ai/voice-ui-kit";

<CopyText text="This is some text to copy" />

Component Variants

CopyText

The CopyText component displays text with a copy button.

import { CopyText } from "@pipecat-ai/voice-ui-kit";

<CopyText text="Copy this text" />

Usage

Basic Usage

Display text with a copy button.

import { CopyText } from "@pipecat-ai/voice-ui-kit";

<CopyText text="Click to copy this text" />

Custom Icon Size

Adjust the size of the copy icon.

import { CopyText } from "@pipecat-ai/voice-ui-kit";

<div className="space-y-2">
  <CopyText text="Small icon" iconSize={12} />
  <CopyText text="Default icon" iconSize={16} />
  <CopyText text="Large icon" iconSize={24} />
</div>

Custom Styling

Apply custom classes to the container.

import { CopyText } from "@pipecat-ai/voice-ui-kit";

<CopyText 
  text="Styled text"
  className="border rounded p-2 bg-muted"
/>

Long Text

The component handles long text with truncation.

import { CopyText } from "@pipecat-ai/voice-ui-kit";

<div className="w-64">
  <CopyText text="This is a very long text that will be truncated if it exceeds the container width" />
</div>

Behavior

When the copy button is clicked:

1. Text is copied to the clipboard using the Clipboard API
2. Icon changes from CopyIcon to CopyCheckIcon
3. Tooltip changes to "Copied!"
4. After 2 seconds, the icon and tooltip reset to the original state

If clipboard access fails, an error is logged to the console.

Integration

The CopyText component uses:

• Button component for the copy action
• Tooltip component for feedback
• Browser Clipboard API for copying text

No special context providers are required.