Settings

import { useState } from 'react';
import { Button, SettingGroup, SettingToggle } from '@arbol-ai/ui';

const AgentSettings = () => {
  const [endOnSilence, setEndOnSilence] = useState(true);
  return (
    <SettingGroup
      action={
        <Button size="sm" variant="outline">
          Reset
        </Button>
      }
      description="How the front desk agent behaves on a call."
      title="Conversation"
    >
      <SettingToggle
        description="The agent hangs up after 30 seconds of silence."
        isSelected={endOnSilence}
        label="End silent calls"
        onChange={setEndOnSilence}
      />
      <SettingToggle
        defaultSelected
        description="Callers can talk over the agent to change the subject."
        help="The agent stops speaking as soon as it hears the caller, and answers what they said."
        label="Allow interruptions"
      />
      <SettingToggle isDisabled label="Record calls" />
    </SettingGroup>
  );
};

<AgentSettings />

import { Button, SettingGroup, SettingRow } from '@arbol-ai/ui';

<SettingGroup title="Calls">
  <SettingRow
    description="Calls end by themselves after this long."
    hint="Applies to new calls."
    label="Call limit"
    layout="stacked"
  >
    <input
      aria-label="Call limit in minutes"
      className="rounded-field bg-gray-a2 h-8 w-full border px-3 text-sm"
      defaultValue={15}
      type="number"
    />
  </SettingRow>
  <SettingRow
    description="Who answers when the agent hands over."
    label="Handoff"
    layout="responsive"
  >
    <Button size="sm" variant="outline">
      Choose people
    </Button>
  </SettingRow>
</SettingGroup>