Bot Instructions PanelBot Instructions Panel

봇 지침과 예시를 탭으로 보여 주는 패널입니다. onVersionClick과 onBotClick을 넘기면 버전·봇 알약이 버튼이 됩니다.A panel that shows bot instructions and examples in tabs. Pass onVersionClick and onBotClick to turn the version and bot pills into buttons.

@horon-ai/react 에이전트Agents

Morning brief

v4LiveCChief of staff

112 tokens

You write the morning brief foruser_namebefore 8 AM.

Lead with what needs a yes today. Keep it under 150 words.

- Usecalendarto list today’s meetings, earliest first.

- Pull the 3 most urgent threads frominbox.

- Never send anything; drafts only.

Type{{to add a variable

user_name

Alpox

calendar

Google Calendar

inbox

Gmail · last 12h

Run Busy Monday to see the brief here.

tsx

import { BotInstructionsPanel } from "@horon-ai/react";

export default function BotInstructionsPanelDemo() {
  return (
    <div className="flex w-full justify-center">
      <BotInstructionsPanel
        title="Morning brief"
        version="v4"
        versionStatus="Live"
        bot={{ initial: "C", name: "Chief of staff" }}
        tokenCount={112}
        instructions={[
          ["You write the morning brief for", { variable: "user_name" }, "before 8 AM."],
          ["Lead with what needs a yes today. Keep it under 150 words."],
          ["- Use", { variable: "calendar", tone: "brand" }, "to list today’s meetings, earliest first."],
          ["- Pull the 3 most urgent threads from", { variable: "inbox", tone: "neutral" }, "."],
          ["- Never send anything; drafts only."],
        ]}
        example={"Good morning Alpox. Two things need a yes today: the Fjord invoice and the 3 PM reschedule."}
        variables={[
          { name: "user_name", value: "Alpox" },
          { name: "calendar", tone: "brand", value: "Google Calendar" },
          { name: "inbox", tone: "neutral", value: "Gmail · last 12h" },
        ]}
        scenarios={["Busy Monday", "Quiet day", "Travel day"]}
        output="Run Busy Monday to see the brief here."
      />
    </div>
  );
}