unovue/shadcn-vue | Random GitHub Issue

Asking the code gods for a random issue...

Performing ancient web development rituals...

Part	Vue component	Responsibility
`MessageScrollerProvider`	`MessageScrollerProvider.vue` (or composable)	Owns scroll state and behavior props.
`MessageScroller`	`MessageScroller.vue`	Styled frame; lays out viewport, content, controls.
`MessageScrollerViewport`	`MessageScrollerViewport.vue`	Scrollable element; emits native scroll events; preserves visible row on prepend.
`MessageScrollerContent`	`MessageScrollerContent.vue`	Transcript container; live-region defaults.
`MessageScrollerItem`	`MessageScrollerItem.vue`	Transcript row boundary; measurement, anchoring, visibility, jump target.
`MessageScrollerButton`	`MessageScrollerButton.vue`	Jump-to-start/end control.

interface MessageScrollerProviderProps {
  autoScroll?: boolean; // default false
  defaultScrollPosition?: 'start' | 'end' | 'last-anchor'; // default 'last-anchor'
  scrollPreviousItemPeek?: number; // default 64 (px)
  preserveScrollOnPrepend?: boolean; // default true
}

{
  scrollToMessage: (id: string) => boolean;
  scrollToEnd: () => void;
  scrollToStart: () => void;
}

{
  currentAnchorId: Ref<string | null>;
  visibleMessageIds: Ref<string[]>;
}

{
  start: Ref<boolean>;
  end: Ref<boolean>;
}

interface MessageScrollerItemProps {
  messageId: string; // stable id
  scrollAnchor?: boolean; // this row starts a turn
  class?: HTMLAttributes['class'];
}

Message
├── MessageAvatar
└── MessageContent
    ├── MessageHeader
    ├── Bubble (or Marker)
    └── MessageFooter

interface MessageProps {
  align?: 'start' | 'end'; // default 'start'
  class?: HTMLAttributes['class'];
}

interface MessageGroupProps {
  class?: HTMLAttributes['class'];
}

interface MessageAvatarProps {
  class?: HTMLAttributes['class'];
}

interface MessageContentProps {
  class?: HTMLAttributes['class'];
}

interface MessageHeaderProps {
  class?: HTMLAttributes['class'];
}

interface MessageFooterProps {
  class?: HTMLAttributes['class'];
}

Bubble
├── BubbleContent
├── BubbleHeader
├── BubbleFooter
└── BubbleAction (optional)

interface BubbleProps {
  variant?: 'default' | 'muted' | 'outline'; // default 'default'
  class?: HTMLAttributes['class'];
}

interface BubbleContentProps {
  class?: HTMLAttributes['class'];
}

Attachment
├── AttachmentImage / AttachmentMedia
├── AttachmentIcon
├── AttachmentContent
│   ├── AttachmentTitle
│   ├── AttachmentDescription
│   └── AttachmentMeta
└── AttachmentActions

interface AttachmentProps {
  variant?: 'default' | 'card'; // default 'default'
  class?: HTMLAttributes['class'];
}

interface AttachmentImageProps {
  src: string;
  alt: string;
  class?: HTMLAttributes['class'];
}

interface AttachmentFileProps {
  name: string;
  type?: string;
  size?: string;
  class?: HTMLAttributes['class'];
}

Marker
├── MarkerIcon
├── MarkerContent
└── MarkerAction

type MarkerVariant = 'default' | 'separator' | 'bordered';

interface MarkerProps {
  variant?: MarkerVariant; // default 'default'
  role?: 'status' | 'log' | string;
  class?: HTMLAttributes['class'];
}

.scroll-fade {
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 1rem,
    black calc(100% - 1rem),
    transparent
  );
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--muted-foreground) 0%,
    var(--foreground) 50%,
    var(--muted-foreground) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 2s infinite linear;
}

npx shadcn-vue@latest add message-scroller message bubble attachment marker

Feature request: Port shadcn/ui chat primitives (MessageScroller, Message, Bubble, Attachment, Marker)#1861

shadcn-vue: Port chat primitives from shadcn/ui (React)

Scope

Cross-cutting requirements

1. MessageScroller

Purpose

Parts (mirroring React API)

Required props / behavior

MessageScrollerProvider

MessageScrollerItem

MessageScrollerViewport

MessageScrollerButton

Key behaviors to implement

2. Message

Purpose

Parts

Required props

Behaviors

3. Bubble

Purpose

Parts

Required props

Behaviors

4. Attachment

Purpose

Parts

Required props

Behaviors

5. Marker

Purpose

Parts

Variants

Required props

Behaviors

6. Utilities

scroll-fade

shimmer

Suggested installation command

Demo / docs requirements

Acceptance criteria

Open questions for maintainers

References

`MessageScrollerProvider`

`MessageScrollerItem`

`MessageScrollerViewport`

`MessageScrollerButton`

`scroll-fade`

`shimmer`