Marker

import { GitBranchIcon, SearchIcon } from "lucide-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/base/marker"

Marker コンポーネントは、ステータス更新、システムメモ、境界線付きの行、ラベル付き区切りなどのインライン会話マーカーを表示します。会話スレッド内で Message と組み合わせて使用します。

インストール#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add marker
コピー

使い方#

コピーimport { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

コピー<Marker>
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
  <MarkerContent>Explored 4 files</MarkerContent>
</Marker>

構成#

マーカーを作成するには、次の構成を使用します。

コピーMarker
├── MarkerIcon
└── MarkerContent

機能#

• インラインマーカー、境界線付きの行、ラベル付き区切りのバリエーション
• 支援技術からは隠される装飾用のアイコンスロット
• リンクやボタンのマーカー用に、render によるポリモーフィックなルート要素
• ストリーミング中のステータステキストに使える shimmer ユーティリティとの組み合わせ
• すべてのパーツに用意された className プロップによるカスタマイズ可能なスタイリング

バリエーション#

Use variant to switch between an inline marker, bordered row, and labeled separator.

import { Marker, MarkerContent } from "@/components/ui/base/marker"

export function MarkerVariantsDemo() {

ステータス#

ストリーミング中または進行中のマーカーには role="status" を設定し、Spinner を含めることで更新が読み上げられるようにします。

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/base/marker"
import { Spinner } from "@/components/ui/base/spinner"

シマー#

アニメーションするストリーミングテキスト効果を得るには、shimmer ユーティリティクラスを MarkerContent に追加します。このユーティリティは shadcn パッケージに含まれています。インストール方法については shimmer のドキュメントを参照してください。

import { Marker, MarkerContent } from "@/components/ui/base/marker"

export function MarkerShimmerDemo() {

区切り#

日付やセクションの区切りなど、ラベル付きの区切りには会話内で separator バリアントを使用します。

import { Marker, MarkerContent } from "@/components/ui/base/marker"

export function MarkerSeparatorDemo() {

境界線#

デフォルトマーカーの配置を保ちながら次の行と区切りたいステータス行には、border バリアントを使用します。

import { FileTextIcon, GitBranchIcon, SearchIcon } from "lucide-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/base/marker"

アイコン付き#

コンテンツと一緒にアイコンを表示するには MarkerIcon を使用します。アイコンをコンテンツの上に積み重ねるには flex-col を使用します。

import { BookOpenCheck, GitBranchIcon, SearchIcon } from "lucide-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/base/marker"

リンクとボタン#

Marker の render プロップを使うと、マーカーをリンクやボタンにできます。

"use client"

import { GitBranchIcon, RotateCcwIcon } from "lucide-react"

コピーimport { Marker, MarkerContent } from "@/components/ui/marker"
 
export function MarkerLinkDemo() {
  return (
    <Marker render={<a href="#" />}>
      <MarkerContent>View the pull request</MarkerContent>
    </Marker>
  )
}

アクセシビリティ#

Marker は既定では装飾的な要素です。適切なセマンティクスは使い方によって異なるため、単一の既定値に頼らず、用途に応じて role を選択してください。

ステータスと進捗#

「Thinking...」や実行中のツールのようなストリーミング中・進行中のマーカーには role="status" を設定し、更新が表示された際に支援技術が読み上げるようにします。Marker は role を内部の要素にそのまま渡します。

コピー<Marker role="status">
  <MarkerIcon>
    <Spinner />
  </MarkerIcon>
  <MarkerContent>Compacting conversation</MarkerContent>
</Marker>

ラベル付き区切り#

日付やセクションラベルなど、テキストを伴う区切りには role は不要です。区切り線は装飾用の CSS 疑似要素であり、テキストは通常のコンテンツとして読み上げられます。

コピー<Marker variant="separator">
  <MarkerContent>Today</MarkerContent>
</Marker>

境界線付きマーカー#

境界線付きマーカーは、デフォルトマーカーと同じセマンティクスを保ちます。下部の境界線は装飾のためのものなので、マーカーの用途に応じて role="status"、render、または role なしのいずれかを選択してください。

コピー<Marker variant="border">
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>Opened implementation notes</MarkerContent>
</Marker>

装飾アイコン#

MarkerIcon は装飾用であり、aria-hidden によって支援技術から隠されるため、意味は隣接する MarkerContent が担います。アイコンのみのマーカーには、空として読み上げられないように aria-label か目に見えるテキストを指定してください。

コピー<Marker aria-label="Synced">
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
</Marker>

インタラクティブなマーカー#

マーカーがリンクやアクションのトリガーになる場合は、render プロップを使って実際の <button> や <a> としてレンダリングし、フォーカス可能にして正しい role を公開してください。アクセシブルネームはマーカーのテキストから取得されます。

コピー<Marker render={<a href="/files" />}>
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>Explored 4 files</MarkerContent>
</Marker>

API リファレンス#

Marker#

The root marker element. The file also exports markerVariants for composing the marker styles into custom components.

MarkerIcon#

A decorative icon slot. Hidden from assistive tech with aria-hidden.

MarkerContent#

The marker text content.