Agent Panel

봇에게 일을 맡기는 입력창과 작업 목록을 담는 패널입니다.

@horon-ai/react 에이전트 Storybook ↗

Preview

⌘↵

Triage overnight email

1m 56s

CChief of staffHoron HQ

Reading 41 new emails

Usage

tsx

import { AgentPanel, ComposerChip, TaskComposer, TaskRow } from "@horon-ai/react";
import { Folder } from "@phosphor-icons/react";

export default function AgentPanelDemo() {
  return (
    <AgentPanel className="max-w-168">
      <TaskComposer
        pickers={
          <>
            <ComposerChip leading="C">Chief of staff</ComposerChip>
            <ComposerChip leading={<Folder />}>Horon HQ</ComposerChip>
          </>
        }
      />
      <TaskRow
        status="running"
        title="Triage overnight email"
        elapsed="1m 56s"
        bot={{ initial: "C", name: "Chief of staff" }}
        project="Horon HQ"
        message="Reading 41 new emails"
      />
    </AgentPanel>
  );
}