Toolbox – Code

Implementation
Toolbox API

Common Examples

Basic Usage

Message action toolbar:

import { Toolbox, UserFeedback } from "@servicetitan/ext-atlas";

function MessageToolbox() {
  const [feedback, setFeedback] = useState(UserFeedback.None);

  return (
    <Toolbox
      text="Message content to copy"
      currentFeedback={feedback}
      onLike={async () => {
        await submitFeedback("positive");
        setFeedback(UserFeedback.Positive);
      }}
      onDislike={async () => {
        await submitFeedback("negative");
        setFeedback(UserFeedback.Negative);
      }}
      onRetry={async () => {
        await regenerateResponse();
      }}
    />
  );
}

With All Actions

Include all available actions:

import { Toolbox, UserFeedback } from "@servicetitan/ext-atlas";

function FullToolbox() {
  return (
    <Toolbox
      text="Message content"
      currentFeedback={UserFeedback.None}
      onLike={handleLike}
      onDislike={handleDislike}
      onRetry={handleRetry}
      onFlag={handleFlag}
      onPlay={handlePlay}
    />
  );
}

Copy Only

Simple copy functionality:

import { Toolbox } from "@servicetitan/ext-atlas";

function CopyOnlyToolbox() {
  return <Toolbox text="Content to copy" />;
}

<Toolbox
  text="Message content"
  currentFeedback={UserFeedback.None}
  onRetry={handleRetry}
  onLike={handleLike}
  onDislike={handleDislike}
  onFlag={handleFlag}
  onPlay={handlePlay}
/>

`Toolbox` Props

currentFeedback

UserFeedback

Current feedback state: None, Positive, or Negative. Affects which buttons are shown.

onDislike

() => Promise<void>

Async callback for dislike button. Button only renders when provided.

onFlag

() => Promise<void>

Async callback for flag button. Button only renders when provided.

onLike

() => Promise<void>

Async callback for like button. Button only renders when provided.

onPlay

() => Promise<void>

Async callback for play audio button. Button only renders when provided.

onRetry

() => Promise<void>

Async callback for retry button. Button only renders when provided.

text

string

The text content to copy when the copy button is clicked.

UserFeedback Enum

enum UserFeedback {
  None = "None",
  Positive = "Positive",
  Negative = "Negative",
}

Atlas

​Common Examples

​Basic Usage

​With All Actions

​Copy Only

​Toolbox Props

​UserFeedback Enum

Common Examples

Basic Usage

With All Actions

Copy Only

`Toolbox` Props

UserFeedback Enum