Message Extras

메시지 동작, 날짜 구분선, 첨부, 코드 블록입니다.

@horon-ai/react 대화 Storybook ↗

Preview

Today

Q3 board deck v5.pdfPDF · 2.4 MB

bash

horon routine run weekly-report \
  --to [email protected]

Usage

tsx

import { Attachment, CodeBlock, DateSeparator, MessageActions } from "@horon-ai/react";
import { ArrowClockwise, Copy, DotsThree, ThumbsDown, ThumbsUp } from "@phosphor-icons/react";

export default function MessageExtrasDemo() {
  return (
    <div className="flex w-full max-w-90 flex-col gap-6">
      <MessageActions
        actions={[
          { label: "Copy", icon: <Copy /> },
          { label: "Regenerate", icon: <ArrowClockwise /> },
          { label: "Good response", icon: <ThumbsUp /> },
          { label: "Bad response", icon: <ThumbsDown /> },
          { label: "More", icon: <DotsThree /> },
        ]}
      />
      <DateSeparator>Today</DateSeparator>
      <Attachment name="Q3 board deck v5.pdf" detail="PDF · 2.4 MB" onRemove={() => undefined} />
      <CodeBlock language="bash" code={"horon routine run weekly-report \\\n  --to [email protected]"} />
    </div>
  );
}