@slexn/codecenter-ui 1.0.0

package/src/components/ui/chat/Chat.vue

@@ -0,0 +1,1297 @@
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue"
+import type {
+  Component,
+  ComponentPublicInstance,
+  HTMLAttributes,
+  StyleValue,
+} from "vue"
+import {
+  BookmarkIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  DownloadIcon,
+  GitBranchIcon,
+  MoreHorizontalIcon,
+  PencilIcon,
+  RotateCcwIcon,
+} from "@lucide/vue"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Spinner } from "@/components/ui/spinner"
+import { cn } from "@/lib/utils"
+import ChatAttachments from "./ChatAttachments.vue"
+import ChatCodeBlock from "./ChatCodeBlock.vue"
+import type {
+  ChatActionKey,
+  ChatActionVisibility,
+  ChatAttachment,
+  ChatSide,
+  ChatStatus,
+  ChatVariant,
+} from "./types"
+
+export type ChatProfile =
+  | string
+  | {
+      alt?: string
+      label?: string
+      src?: string
+    }
+
+export type ChatMessage =
+  | string
+  | {
+      actionsVisibility?: ChatActionVisibility
+      attachments?: ChatAttachment[]
+      content: string
+      id?: number | string
+      name?: string
+      profile?: ChatProfile
+      regenerate?: boolean
+      regenerating?: boolean
+      status?: ChatStatus
+      version?: number
+      versions?: string[]
+    }
+
+export interface ChatResolvedMessage {
+  actionsVisibility: ChatActionVisibility
+  attachments: ChatAttachment[]
+  content: string
+  id: number | string
+  key: string
+  name?: string
+  profile?: ChatProfile
+  regenerate: boolean
+  regenerating: boolean
+  side: ChatSide
+  status: ChatStatus
+  version: number
+  versionCount: number
+  versions: string[]
+  variant: ChatVariant
+}
+
+export interface ChatActionSlotProps {
+  message: ChatResolvedMessage
+  side: ChatSide
+  status: ChatStatus
+}
+
+export interface ChatAttachmentSlotProps extends ChatActionSlotProps {
+  attachments: ChatAttachment[]
+}
+
+export interface ChatContentSlotProps extends ChatActionSlotProps {
+  attachments: ChatAttachment[]
+  content: string
+  isStreaming: boolean
+}
+
+export interface ChatMessageSlotProps extends ChatContentSlotProps {
+  canCollapse: boolean
+  isCollapsed: boolean
+  toggleExpanded: () => void
+}
+
+type ChatActionSlotName = "left-actions" | "message-actions" | "right-actions"
+type ChatContentPart =
+  | {
+      content: string
+      key: string
+      type: "text"
+    }
+  | {
+      content: string
+      key: string
+      language?: string
+      type: "code"
+    }
+type ChatSingleActionKey = Exclude<ChatActionKey, "pagination">
+
+const actionIcons: Record<ChatSingleActionKey, Component> = {
+  bookmark: BookmarkIcon,
+  branch: GitBranchIcon,
+  copy: CopyIcon,
+  download: DownloadIcon,
+  edit: PencilIcon,
+  regenerate: RotateCcwIcon,
+}
+
+const props = withDefaults(
+  defineProps<{
+    actionItems?: ChatActionKey[]
+    actionMenuThreshold?: number
+    actionsLabel?: string
+    ariaLive?: "assertive" | "off" | "polite"
+    ariaLabel?: string
+    autoScroll?: boolean
+    autoScrollBehavior?: ScrollBehavior
+    bookmarkAction?: boolean
+    bookmarkLabel?: string
+    branchAction?: boolean
+    branchLabel?: string
+    class?: HTMLAttributes["class"]
+    collapseLabel?: string
+    collapsible?: boolean
+    codeBlockCopiedLabel?: string
+    codeBlockCloseLabel?: string
+    codeBlockCopyLabel?: string
+    codeBlockExpandLabel?: string
+    codeBlockHighlight?: boolean
+    codeBlockLabel?: string
+    codeBlockLineNumbers?: boolean
+    codeBlockMaxVisibleLines?: number
+    codeBlocks?: boolean
+    copyAction?: boolean
+    copyLabel?: string
+    downloadAction?: boolean
+    downloadLabel?: string
+    editAction?: boolean
+    editLabel?: string
+    expandLabel?: string
+    left?: ChatMessage | ChatMessage[]
+    leftActionItems?: ChatActionKey[]
+    leftName?: string
+    leftProfile?: ChatProfile
+    leftVariant?: ChatVariant
+    moreActionsLabel?: string
+    nextVersionLabel?: string
+    paginationAction?: boolean
+    previousVersionLabel?: string
+    regenerateAction?: boolean
+    regenerateLabel?: string
+    regeneratingLabel?: string
+    right?: ChatMessage | ChatMessage[]
+    rightActionItems?: ChatActionKey[]
+    rightName?: string
+    rightProfile?: ChatProfile
+    rightVariant?: ChatVariant
+  }>(),
+  {
+    actionItems: () => ["pagination", "regenerate"],
+    actionMenuThreshold: 3,
+    actionsLabel: "Message actions",
+    ariaLive: "polite",
+    ariaLabel: "Chat messages",
+    autoScroll: false,
+    autoScrollBehavior: "smooth",
+    bookmarkLabel: "북마크",
+    branchLabel: "브랜치",
+    collapseLabel: "간단히",
+    collapsible: true,
+    codeBlockCopiedLabel: "복사됨",
+    codeBlockCloseLabel: "닫기",
+    codeBlockCopyLabel: "코드 복사",
+    codeBlockExpandLabel: "크게 보기",
+    codeBlockHighlight: true,
+    codeBlockLabel: "Code",
+    codeBlockLineNumbers: true,
+    codeBlockMaxVisibleLines: 20,
+    codeBlocks: true,
+    copyLabel: "복사",
+    downloadLabel: "다운로드",
+    editLabel: "수정",
+    expandLabel: "더보기",
+    leftVariant: "bubble",
+    moreActionsLabel: "더 많은 작업",
+    nextVersionLabel: "다음 응답",
+    previousVersionLabel: "이전 응답",
+    regenerateLabel: "재생성",
+    regeneratingLabel: "재생성 중",
+    rightVariant: "bubble",
+  },
+)
+
+const emit = defineEmits<{
+  action: [action: ChatSingleActionKey, message: ChatResolvedMessage]
+  bookmark: [message: ChatResolvedMessage]
+  branch: [message: ChatResolvedMessage]
+  codeCopy: [message: ChatResolvedMessage, code: string, language?: string]
+  copy: [message: ChatResolvedMessage]
+  download: [message: ChatResolvedMessage]
+  edit: [message: ChatResolvedMessage]
+  paginate: [message: ChatResolvedMessage, version: number]
+  regenerate: [message: ChatResolvedMessage]
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const slots = defineSlots<{
+  attachments?: (props: ChatAttachmentSlotProps) => unknown
+  content?: (props: ChatContentSlotProps) => unknown
+  "left-actions"?: (props: ChatActionSlotProps) => unknown
+  message?: (props: ChatMessageSlotProps) => unknown
+  "message-actions"?: (props: ChatActionSlotProps) => unknown
+  "right-actions"?: (props: ChatActionSlotProps) => unknown
+}>()
+const collapsedHeightByKey = ref<Record<string, number>>({})
+const overflowByKey = ref<Record<string, boolean>>({})
+const expandedKeys = ref(new Set<string>())
+const expandedHeightByKey = ref<Record<string, number>>({})
+const contentRefs = new Map<string, HTMLElement>()
+const observedContentElements = new Set<HTMLElement>()
+let resizeObserver: ResizeObserver | undefined
+let pendingMeasure = false
+let pendingAutoScroll = false
+
+function toMessageList(value?: ChatMessage | ChatMessage[]) {
+  if (!value) return []
+  return Array.isArray(value) ? value : [value]
+}
+
+function normalizeMessage(
+  value: ChatMessage,
+  side: ChatSide,
+  index: number,
+): ChatResolvedMessage {
+  const sideName = side === "left" ? props.leftName : props.rightName
+  const sideProfile = side === "left" ? props.leftProfile : props.rightProfile
+  const sideVariant = side === "left" ? props.leftVariant : props.rightVariant
+
+  if (typeof value === "string") {
+    return {
+      actionsVisibility: "always",
+      attachments: [],
+      content: value,
+      id: `${side}-${index}`,
+      key: `${side}-${index}`,
+      name: sideName,
+      profile: sideProfile,
+      regenerate: false,
+      regenerating: false,
+      side,
+      status: "complete",
+      version: 0,
+      versionCount: 1,
+      versions: [value],
+      variant: sideVariant,
+    }
+  }
+
+  const id = value.id ?? `${side}-${index}`
+  const versions = normalizeVersions(value.content, value.versions)
+  const version = normalizeVersion(value.version, versions.length)
+
+  return {
+    actionsVisibility: value.actionsVisibility ?? "always",
+    attachments: value.attachments ?? [],
+    content: versions[version] ?? value.content,
+    id,
+    key: `${side}-${id}`,
+    name: value.name ?? sideName,
+    profile: value.profile ?? sideProfile,
+    regenerate: value.regenerate ?? false,
+    regenerating: value.regenerating ?? false,
+    side,
+    status: normalizeStatus(value.status),
+    version,
+    versionCount: versions.length,
+    versions,
+    variant: sideVariant,
+  }
+}
+
+function normalizeVersions(content: string, versions?: string[]) {
+  if (!versions || versions.length === 0) return [content]
+
+  return versions
+}
+
+function normalizeStatus(status: ChatStatus | undefined): ChatStatus {
+  return status ?? "complete"
+}
+
+function normalizeVersion(version: number | undefined, versionCount: number) {
+  const fallbackVersion = versionCount - 1
+  const nextVersion = version ?? fallbackVersion
+
+  if (!Number.isFinite(nextVersion)) return fallbackVersion
+
+  return Math.min(Math.max(Math.trunc(nextVersion), 0), versionCount - 1)
+}
+
+const messages = computed(() => {
+  const leftMessages = toMessageList(props.left).map((message, index) =>
+    normalizeMessage(message, "left", index),
+  )
+  const rightMessages = toMessageList(props.right).map((message, index) =>
+    normalizeMessage(message, "right", index),
+  )
+  const rows: ChatResolvedMessage[] = []
+  const maxLength = Math.max(leftMessages.length, rightMessages.length)
+
+  for (let index = 0; index < maxLength; index += 1) {
+    if (leftMessages[index]) rows.push(leftMessages[index])
+    if (rightMessages[index]) rows.push(rightMessages[index])
+  }
+
+  return rows
+})
+
+function profileSrc(profile?: ChatProfile) {
+  if (!profile || typeof profile === "string") return undefined
+  return profile.src
+}
+
+function profileLabel(profile?: ChatProfile) {
+  if (!profile) return undefined
+  if (typeof profile === "string") return profile
+  return profile.label
+}
+
+function profileAlt(message: ChatResolvedMessage) {
+  if (!message.profile || typeof message.profile === "string") {
+    return message.name ?? "Profile"
+  }
+
+  return message.profile.alt ?? message.name ?? "Profile"
+}
+
+function hasProfile(message: ChatResolvedMessage) {
+  return Boolean(message.profile)
+}
+
+function canCollapse(message: ChatResolvedMessage) {
+  return !isStreaming(message) &&
+    props.collapsible &&
+    !hasCodeBlock(message) &&
+    Boolean(overflowByKey.value[message.key])
+}
+
+function isMessageCollapsed(message: ChatResolvedMessage) {
+  return canCollapse(message) && !expandedKeys.value.has(message.key)
+}
+
+function toggleExpanded(key: string) {
+  const nextExpandedKeys = new Set(expandedKeys.value)
+
+  if (nextExpandedKeys.has(key)) {
+    nextExpandedKeys.delete(key)
+  } else {
+    nextExpandedKeys.add(key)
+  }
+
+  expandedKeys.value = nextExpandedKeys
+}
+
+function setContentRef(
+  key: string,
+  element: ComponentPublicInstance | Element | null,
+) {
+  const currentElement = contentRefs.get(key)
+
+  if (!element) {
+    if (currentElement) unobserveContentElement(currentElement)
+    contentRefs.delete(key)
+    return
+  }
+
+  if (element instanceof HTMLElement) {
+    if (currentElement && currentElement !== element) {
+      unobserveContentElement(currentElement)
+    }
+
+    contentRefs.set(key, element)
+    observeContentElement(element)
+    measureOverflowSoon()
+    return
+  }
+
+  if (currentElement) unobserveContentElement(currentElement)
+  contentRefs.delete(key)
+}
+
+function observeContentElement(element: HTMLElement) {
+  if (!resizeObserver || observedContentElements.has(element)) return
+
+  resizeObserver.observe(element)
+  observedContentElements.add(element)
+}
+
+function unobserveContentElement(element: HTMLElement) {
+  resizeObserver?.unobserve(element)
+  observedContentElements.delete(element)
+}
+
+function getLineHeight(element: HTMLElement) {
+  const styles = window.getComputedStyle(element)
+  const lineHeight = Number.parseFloat(styles.lineHeight)
+
+  if (Number.isFinite(lineHeight)) return lineHeight
+
+  const fontSize = Number.parseFloat(styles.fontSize)
+
+  return Number.isFinite(fontSize) ? fontSize * 1.5 : 21
+}
+
+function measureOverflow() {
+  if (!props.collapsible) {
+    if (Object.keys(overflowByKey.value).length > 0) {
+      overflowByKey.value = {}
+    }
+    if (Object.keys(collapsedHeightByKey.value).length > 0) {
+      collapsedHeightByKey.value = {}
+    }
+    if (Object.keys(expandedHeightByKey.value).length > 0) {
+      expandedHeightByKey.value = {}
+    }
+    return
+  }
+
+  const nextCollapsedHeightByKey: Record<string, number> = {}
+  const nextExpandedHeightByKey: Record<string, number> = {}
+  const nextOverflowByKey: Record<string, boolean> = {}
+  const activeKeys = new Set(messages.value.map((message) => message.key))
+
+  for (const [key, element] of contentRefs) {
+    if (!activeKeys.has(key)) {
+      unobserveContentElement(element)
+      contentRefs.delete(key)
+      continue
+    }
+
+    const maxHeight = getLineHeight(element) * 4
+    nextCollapsedHeightByKey[key] = maxHeight
+    nextExpandedHeightByKey[key] = element.scrollHeight
+    nextOverflowByKey[key] = element.scrollHeight > maxHeight + 1
+  }
+
+  if (!isSameNumberMap(collapsedHeightByKey.value, nextCollapsedHeightByKey)) {
+    collapsedHeightByKey.value = nextCollapsedHeightByKey
+  }
+  if (!isSameNumberMap(expandedHeightByKey.value, nextExpandedHeightByKey)) {
+    expandedHeightByKey.value = nextExpandedHeightByKey
+  }
+  if (!isSameOverflowMap(overflowByKey.value, nextOverflowByKey)) {
+    overflowByKey.value = nextOverflowByKey
+  }
+}
+
+function isSameNumberMap(
+  current: Record<string, number>,
+  next: Record<string, number>,
+) {
+  const currentKeys = Object.keys(current)
+  const nextKeys = Object.keys(next)
+
+  if (currentKeys.length !== nextKeys.length) return false
+
+  return nextKeys.every((key) => current[key] === next[key])
+}
+
+function isSameOverflowMap(
+  current: Record<string, boolean>,
+  next: Record<string, boolean>,
+) {
+  const currentKeys = Object.keys(current)
+  const nextKeys = Object.keys(next)
+
+  if (currentKeys.length !== nextKeys.length) return false
+
+  return nextKeys.every((key) => current[key] === next[key])
+}
+
+function measureOverflowSoon() {
+  if (pendingMeasure) return
+
+  pendingMeasure = true
+
+  void nextTick(() => {
+    pendingMeasure = false
+    measureOverflow()
+  })
+}
+
+function autoScrollSoon() {
+  if (!props.autoScroll || !messages.value.some(isStreaming)) return
+  if (pendingAutoScroll) return
+
+  pendingAutoScroll = true
+
+  const scroll = () => {
+    pendingAutoScroll = false
+    const targetElement = rootRef.value?.lastElementChild
+
+    if (targetElement instanceof HTMLElement) {
+      targetElement.scrollIntoView({
+        block: "end",
+        behavior: props.autoScrollBehavior,
+      })
+    }
+  }
+
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(scroll)
+  } else {
+    window.setTimeout(scroll, 0)
+  }
+}
+
+function messageRowClass(message: ChatResolvedMessage) {
+  return cn(
+    "flex w-full items-start gap-2",
+    message.side === "right" &&
+      message.variant === "bubble" &&
+      "justify-end",
+    message.actionsVisibility === "hover" && "group/chat-actions",
+  )
+}
+
+function messageBodyClass(message: ChatResolvedMessage) {
+  return cn(
+    "relative flex min-w-0 flex-col gap-1",
+    message.variant === "plain" || hasCodeBlock(message)
+      ? "w-full flex-1"
+      : "max-w-[78%]",
+    message.side === "right" ? "order-1 items-end" : "items-start",
+  )
+}
+
+function bubbleClass(message: ChatResolvedMessage) {
+  return cn(
+    "relative min-w-0 max-w-full text-sm leading-relaxed break-words",
+    message.variant === "plain"
+      ? "w-full text-foreground"
+      : "rounded-2xl bg-secondary px-4 py-2 text-secondary-foreground",
+    message.variant === "bubble" &&
+      message.side === "right" &&
+      "bg-primary text-primary-foreground",
+  )
+}
+
+function fadeClass(message: ChatResolvedMessage) {
+  return cn(
+    "absolute inset-x-0 bottom-0 flex h-16 items-end justify-center pb-2 transition-opacity duration-200 ease-out",
+    message.variant === "plain"
+      ? "bg-gradient-to-b from-transparent via-white/90 to-white"
+      : message.side === "right"
+        ? "bg-gradient-to-b from-transparent via-primary/90 to-primary"
+        : "bg-gradient-to-b from-transparent via-secondary/90 to-secondary",
+  )
+}
+
+function contentClass(message: ChatResolvedMessage) {
+  return cn(
+    "overflow-hidden transition-[max-height] duration-300 ease-in-out motion-reduce:transition-none",
+    !canCollapse(message) && "overflow-visible",
+  )
+}
+
+function contentStyle(message: ChatResolvedMessage): StyleValue | undefined {
+  if (!canCollapse(message)) return undefined
+
+  const height = isMessageCollapsed(message)
+    ? collapsedHeightByKey.value[message.key]
+    : expandedHeightByKey.value[message.key]
+
+  if (!height) return undefined
+
+  return {
+    maxHeight: `${height}px`,
+  }
+}
+
+function toggleButtonLabel(message: ChatResolvedMessage) {
+  return isMessageCollapsed(message) ? props.expandLabel : props.collapseLabel
+}
+
+function toggleArrow(message: ChatResolvedMessage) {
+  return isMessageCollapsed(message) ? "↓" : "↑"
+}
+
+function toggleButtonClass(message: ChatResolvedMessage) {
+  return cn(
+    "inline-flex items-center gap-1 border-0 bg-transparent p-0 text-xs font-medium shadow-none transition-colors hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+    message.variant === "plain"
+      ? "text-muted-foreground hover:text-foreground"
+      : message.side === "right"
+        ? "text-primary-foreground/85 hover:text-primary-foreground"
+        : "text-secondary-foreground/70 hover:text-secondary-foreground",
+    !isMessageCollapsed(message) && "mt-2",
+  )
+}
+
+function isStreaming(message: ChatResolvedMessage) {
+  return message.status === "streaming"
+}
+
+function streamingIndicatorClass(message: ChatResolvedMessage) {
+  return cn(
+    "mt-2 inline-flex items-center text-current/70",
+    message.variant === "plain" && "text-muted-foreground",
+  )
+}
+
+function actionSlotProps(message: ChatResolvedMessage): ChatActionSlotProps {
+  return {
+    message,
+    side: message.side,
+    status: message.status,
+  }
+}
+
+function attachmentSlotProps(message: ChatResolvedMessage): ChatAttachmentSlotProps {
+  return {
+    ...actionSlotProps(message),
+    attachments: message.attachments,
+  }
+}
+
+function contentSlotProps(message: ChatResolvedMessage): ChatContentSlotProps {
+  return {
+    ...actionSlotProps(message),
+    attachments: message.attachments,
+    content: message.content,
+    isStreaming: isStreaming(message),
+  }
+}
+
+function messageSlotProps(message: ChatResolvedMessage): ChatMessageSlotProps {
+  return {
+    ...contentSlotProps(message),
+    canCollapse: canCollapse(message),
+    isCollapsed: isMessageCollapsed(message),
+    toggleExpanded: () => toggleExpanded(message.key),
+  }
+}
+
+function shouldRenderCodeBlocks(message: ChatResolvedMessage) {
+  return props.codeBlocks && message.side === "left"
+}
+
+function hasCodeBlock(message: ChatResolvedMessage) {
+  return shouldRenderCodeBlocks(message) &&
+    /```([^\n\r`]*)\r?\n?([\s\S]*?)```/.test(message.content)
+}
+
+function contentParts(message: ChatResolvedMessage): ChatContentPart[] {
+  if (!shouldRenderCodeBlocks(message)) {
+    return [
+      {
+        content: message.content,
+        key: `${message.key}-text`,
+        type: "text",
+      },
+    ]
+  }
+
+  const parts: ChatContentPart[] = []
+  const fencePattern = /```([^\n\r`]*)\r?\n?([\s\S]*?)```/g
+  let lastIndex = 0
+  let index = 0
+  let match: RegExpExecArray | null
+
+  const pushText = (content: string) => {
+    const normalizedContent = content.replace(/^(?:\r?\n)+|(?:\r?\n)+$/g, "")
+
+    if (!normalizedContent.trim()) return
+
+    parts.push({
+      content: normalizedContent,
+      key: `${message.key}-text-${index}`,
+      type: "text",
+    })
+    index += 1
+  }
+
+  while ((match = fencePattern.exec(message.content)) !== null) {
+    pushText(message.content.slice(lastIndex, match.index))
+
+    const language = normalizeCodeLanguage(match[1])
+    const code = (match[2] ?? "").replace(/^(?:\r?\n)+|(?:\r?\n)+$/g, "")
+
+    parts.push({
+      content: code,
+      key: `${message.key}-code-${index}`,
+      language,
+      type: "code",
+    })
+    index += 1
+    lastIndex = fencePattern.lastIndex
+  }
+
+  pushText(message.content.slice(lastIndex))
+
+  if (parts.length === 0) {
+    return [
+      {
+        content: message.content,
+        key: `${message.key}-text`,
+        type: "text",
+      },
+    ]
+  }
+
+  return parts
+}
+
+function normalizeCodeLanguage(info?: string) {
+  return info?.trim().split(/\s+/)[0] || undefined
+}
+
+function handleCodeCopy(message: ChatResolvedMessage, part: ChatContentPart) {
+  if (part.type !== "code") return
+
+  emit("codeCopy", message, part.content, part.language)
+}
+
+function sideActionSlotName(message: ChatResolvedMessage): ChatActionSlotName {
+  return message.side === "left" ? "left-actions" : "right-actions"
+}
+
+function hasActions(message: ChatResolvedMessage) {
+  return Boolean(
+    messageActionItems(message).length > 0 ||
+      slots[sideActionSlotName(message)] ||
+      slots["message-actions"],
+  )
+}
+
+function hasAttachments(message: ChatResolvedMessage) {
+  return message.attachments.length > 0
+}
+
+function actionClass(message: ChatResolvedMessage) {
+  return cn(
+    "flex w-full items-center px-1 pt-1",
+    message.side === "right" ? "justify-end" : "justify-start",
+    message.actionsVisibility === "hover" &&
+      "absolute inset-x-0 top-full pointer-events-none pt-2 opacity-0 transition-opacity duration-150 ease-out group-hover/chat-actions:pointer-events-auto group-hover/chat-actions:opacity-100 group-focus-within/chat-actions:pointer-events-auto group-focus-within/chat-actions:opacity-100",
+  )
+}
+
+function canRegenerate(message: ChatResolvedMessage) {
+  return isActionEnabled(message, "regenerate") &&
+    (message.regenerate || message.regenerating)
+}
+
+function hasResponseControls(message: ChatResolvedMessage) {
+  return canPaginate(message) || canRegenerate(message)
+}
+
+function canPaginate(message: ChatResolvedMessage) {
+  return isActionEnabled(message, "pagination") && message.versionCount > 1
+}
+
+function paginationStatus(message: ChatResolvedMessage) {
+  return `${message.version + 1} / ${message.versionCount}`
+}
+
+function handlePaginate(message: ChatResolvedMessage, version: number) {
+  if (message.regenerating) return
+  if (version < 0 || version >= message.versionCount) return
+  if (version === message.version) return
+
+  emit("paginate", message, version)
+}
+
+function configuredActionItems(message: ChatResolvedMessage) {
+  const items = message.side === "left"
+    ? props.leftActionItems ?? props.actionItems
+    : props.rightActionItems ?? props.actionItems
+
+  return withActionFlags(items)
+}
+
+function isActionEnabled(message: ChatResolvedMessage, action: ChatActionKey) {
+  return configuredActionItems(message).includes(action)
+}
+
+function withActionFlags(items: ChatActionKey[]) {
+  const nextItems = [...items]
+
+  applyActionFlag(nextItems, "pagination", props.paginationAction)
+  applyActionFlag(nextItems, "regenerate", props.regenerateAction)
+  applyActionFlag(nextItems, "copy", props.copyAction)
+  applyActionFlag(nextItems, "bookmark", props.bookmarkAction)
+  applyActionFlag(nextItems, "branch", props.branchAction)
+  applyActionFlag(nextItems, "download", props.downloadAction)
+  applyActionFlag(nextItems, "edit", props.editAction)
+
+  return nextItems
+}
+
+function applyActionFlag(
+  items: ChatActionKey[],
+  action: ChatActionKey,
+  enabled: boolean | undefined,
+) {
+  const index = items.indexOf(action)
+
+  if (enabled === true && index === -1) {
+    items.push(action)
+  }
+}
+
+function messageActionItems(message: ChatResolvedMessage): ChatActionKey[] {
+  return configuredActionItems(message).filter((action) => {
+    if (action === "pagination") return message.versionCount > 1
+    if (action === "regenerate") return message.regenerate || message.regenerating
+
+    return true
+  })
+}
+
+function singleActionItems(message: ChatResolvedMessage): ChatSingleActionKey[] {
+  return messageActionItems(message).filter(
+    (action): action is ChatSingleActionKey => action !== "pagination",
+  )
+}
+
+function shouldUseActionMenu(message: ChatResolvedMessage) {
+  const threshold = Math.max(1, Math.trunc(props.actionMenuThreshold))
+
+  return messageActionItems(message).length >= threshold
+}
+
+function isPrimaryInlineAction(action: ChatSingleActionKey) {
+  return action === "regenerate" || action === "copy"
+}
+
+function inlineSingleActionItems(message: ChatResolvedMessage) {
+  const actions = singleActionItems(message)
+
+  if (!shouldUseActionMenu(message)) return actions
+
+  return actions.filter(isPrimaryInlineAction)
+}
+
+function menuActionItems(message: ChatResolvedMessage) {
+  if (!shouldUseActionMenu(message)) return []
+
+  return singleActionItems(message).filter(
+    (action) => !isPrimaryInlineAction(action),
+  )
+}
+
+function hasActionMenu(message: ChatResolvedMessage) {
+  return menuActionItems(message).length > 0
+}
+
+function actionLabel(action: ChatSingleActionKey, message: ChatResolvedMessage) {
+  if (action === "regenerate") return regenerateButtonLabel(message)
+  if (action === "copy") return props.copyLabel
+  if (action === "bookmark") return props.bookmarkLabel
+  if (action === "branch") return props.branchLabel
+  if (action === "download") return props.downloadLabel
+
+  return props.editLabel
+}
+
+function actionSlot(action: ChatSingleActionKey) {
+  return `chat-${action}`
+}
+
+function isSingleActionDisabled(action: ChatSingleActionKey, message: ChatResolvedMessage) {
+  return action === "regenerate" && message.regenerating
+}
+
+async function copyMessage(message: ChatResolvedMessage) {
+  try {
+    if (typeof navigator !== "undefined") {
+      await navigator.clipboard?.writeText(message.content)
+    }
+  } catch {
+    // Clipboard support depends on browser permissions; the action event still fires.
+  }
+
+  emit("copy", message)
+  emit("action", "copy", message)
+}
+
+function handleSingleAction(action: ChatSingleActionKey, message: ChatResolvedMessage) {
+  if (isSingleActionDisabled(action, message)) return
+
+  if (action === "regenerate") {
+    handleRegenerate(message)
+    return
+  }
+
+  if (action === "copy") {
+    void copyMessage(message)
+    return
+  }
+
+  if (action === "bookmark") emit("bookmark", message)
+  if (action === "branch") emit("branch", message)
+  if (action === "download") emit("download", message)
+  if (action === "edit") emit("edit", message)
+
+  emit("action", action, message)
+}
+
+function regenerateButtonLabel(message: ChatResolvedMessage) {
+  return message.regenerating ? props.regeneratingLabel : props.regenerateLabel
+}
+
+function actionToolbarLabel(message: ChatResolvedMessage) {
+  const details = messageActionItems(message)
+    .map((action) =>
+      action === "pagination"
+        ? paginationStatus(message)
+        : actionLabel(action, message),
+    )
+    .join(", ")
+
+  return details ? `${props.actionsLabel}, ${details}` : props.actionsLabel
+}
+
+function handleRegenerate(message: ChatResolvedMessage) {
+  if (message.regenerating) return
+
+  emit("regenerate", message)
+  emit("action", "regenerate", message)
+}
+
+function actionToolbarClass(message: ChatResolvedMessage) {
+  return cn(
+    "inline-flex max-w-full shrink-0 items-center rounded-md text-muted-foreground",
+    "[&>button]:relative [&>button]:rounded-none [&>button]:shadow-none",
+    "[&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md",
+    "[&>button:not(:first-child)]:-ml-px [&>button:focus-visible]:z-10",
+    "[&>[data-slot=button]]:relative [&>[data-slot=button]]:rounded-none [&>[data-slot=button]]:shadow-none",
+    "[&>[data-slot=button]:first-child]:rounded-l-md [&>[data-slot=button]:last-child]:rounded-r-md",
+    "[&>[data-slot=button]:not(:first-child)]:-ml-px [&>[data-slot=button]:focus-visible]:z-10",
+    "[&>[data-slot=chat-pagination-status]]:relative [&>[data-slot=chat-pagination-status]]:rounded-none",
+    "[&>[data-slot=chat-pagination-status]:first-child]:rounded-l-md [&>[data-slot=chat-pagination-status]:last-child]:rounded-r-md",
+    "[&>[data-slot=chat-pagination-status]:not(:first-child)]:-ml-px",
+    message.side === "right" && "order-2",
+  )
+}
+
+function actionButtonClass() {
+  return "text-muted-foreground hover:text-foreground"
+}
+
+function actionStatusClass() {
+  return cn(
+    "inline-flex h-8 min-w-12 items-center justify-center whitespace-nowrap border border-input bg-background px-2 text-xs font-medium text-muted-foreground shadow-none",
+  )
+}
+
+watch(messages, () => {
+  measureOverflowSoon()
+  autoScrollSoon()
+}, { flush: "post" })
+watch(() => props.collapsible, () => measureOverflowSoon(), { flush: "post" })
+
+onMounted(() => {
+  measureOverflowSoon()
+  autoScrollSoon()
+
+  if (typeof ResizeObserver !== "undefined" && rootRef.value) {
+    resizeObserver = new ResizeObserver(() => measureOverflowSoon())
+    resizeObserver.observe(rootRef.value)
+    contentRefs.forEach((element) => observeContentElement(element))
+  }
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+})
+</script>
+
+<template>
+  <section
+    ref="rootRef"
+    data-slot="chat"
+    :aria-live="props.ariaLive"
+    :aria-label="props.ariaLabel"
+    :class="cn('flex w-full flex-col gap-4 rounded-lg bg-background p-4 text-foreground', props.class)"
+    role="log"
+  >
+    <div
+      v-for="message in messages"
+      :key="message.key"
+      data-slot="chat-message"
+      :data-side="message.side"
+      :data-status="message.status"
+      :data-variant="message.variant"
+      :class="messageRowClass(message)"
+    >
+      <slot
+        v-if="slots.message"
+        name="message"
+        v-bind="messageSlotProps(message)"
+      />
+
+      <template v-else>
+      <div
+        v-if="hasProfile(message)"
+        data-slot="chat-profile"
+        :class="
+          cn(
+            'flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground',
+            message.side === 'right' && 'order-2 bg-primary text-primary-foreground',
+          )
+        "
+      >
+        <img
+          v-if="profileSrc(message.profile)"
+          :alt="profileAlt(message)"
+          class="size-full rounded-full object-cover"
+          :src="profileSrc(message.profile)"
+        />
+        <span v-else>{{ profileLabel(message.profile) }}</span>
+      </div>
+
+      <div
+        :class="messageBodyClass(message)"
+      >
+        <span
+          v-if="message.name"
+          data-slot="chat-name"
+          class="px-1 text-xs font-medium text-muted-foreground"
+        >
+          {{ message.name }}
+        </span>
+        <slot
+          v-if="hasAttachments(message) || slots.attachments"
+          name="attachments"
+          v-bind="attachmentSlotProps(message)"
+        >
+          <ChatAttachments
+            v-if="hasAttachments(message)"
+            :attachments="message.attachments"
+            :side="message.side"
+          />
+        </slot>
+        <div
+          data-slot="chat-bubble"
+          :data-collapsed="isMessageCollapsed(message) ? '' : undefined"
+          :data-status="message.status"
+          :aria-busy="isStreaming(message) ? 'true' : undefined"
+          :class="bubbleClass(message)"
+        >
+          <div
+            data-slot="chat-content-frame"
+            class="relative"
+          >
+            <div
+              :ref="(element) => setContentRef(message.key, element)"
+              data-slot="chat-content"
+              :data-status="message.status"
+              :class="contentClass(message)"
+              :style="contentStyle(message)"
+            >
+              <slot
+                name="content"
+                v-bind="contentSlotProps(message)"
+              >
+                <div
+                  data-slot="chat-default-content"
+                  class="flex min-w-0 flex-col gap-2"
+                >
+                  <template
+                    v-for="part in contentParts(message)"
+                    :key="part.key"
+                  >
+                    <p
+                      v-if="part.type === 'text'"
+                      data-slot="chat-text"
+                      class="m-0 whitespace-pre-wrap"
+                    >
+                      {{ part.content }}
+                    </p>
+                    <ChatCodeBlock
+                      v-else
+                      :code="part.content"
+                      :close-label="props.codeBlockCloseLabel"
+                      :copied-label="props.codeBlockCopiedLabel"
+                      :copy-label="props.codeBlockCopyLabel"
+                      :expand-label="props.codeBlockExpandLabel"
+                      :highlight="props.codeBlockHighlight"
+                      :label="props.codeBlockLabel"
+                      :language="part.language"
+                      :line-numbers="props.codeBlockLineNumbers"
+                      :max-visible-lines="props.codeBlockMaxVisibleLines"
+                      @copy="handleCodeCopy(message, part)"
+                    />
+                  </template>
+                </div>
+              </slot>
+              <span
+                v-if="isStreaming(message)"
+                data-slot="chat-streaming-indicator"
+                :class="streamingIndicatorClass(message)"
+              >
+                <Spinner decorative />
+              </span>
+            </div>
+            <div
+              v-if="isMessageCollapsed(message)"
+              data-slot="chat-fade"
+              :class="fadeClass(message)"
+            >
+              <button
+                data-slot="chat-expand"
+                type="button"
+                :aria-expanded="false"
+                :aria-label="props.expandLabel"
+                :class="toggleButtonClass(message)"
+                @click="toggleExpanded(message.key)"
+              >
+                <span aria-hidden="true">{{ toggleArrow(message) }}</span>
+                <span>{{ props.expandLabel }}</span>
+              </button>
+            </div>
+          </div>
+          <div
+            v-if="canCollapse(message) && !isMessageCollapsed(message)"
+            data-slot="chat-collapse"
+            class="flex justify-center"
+          >
+            <button
+              data-slot="chat-expand"
+              type="button"
+              :aria-expanded="true"
+              :aria-label="props.collapseLabel"
+              :class="toggleButtonClass(message)"
+              @click="toggleExpanded(message.key)"
+            >
+              <span aria-hidden="true">{{ toggleArrow(message) }}</span>
+              <span>{{ toggleButtonLabel(message) }}</span>
+            </button>
+          </div>
+        </div>
+        <div
+          v-if="hasActions(message)"
+          data-slot="chat-actions"
+          :data-actions-visibility="message.actionsVisibility"
+          :class="actionClass(message)"
+        >
+          <div
+            data-slot="chat-action-toolbar"
+            :data-response-controls="hasResponseControls(message) ? '' : undefined"
+            :aria-label="actionToolbarLabel(message)"
+            :class="actionToolbarClass(message)"
+            role="toolbar"
+          >
+            <template v-if="canPaginate(message)">
+              <Button
+                data-slot="chat-pagination-prev"
+                type="button"
+                variant="outline"
+                size="icon-sm"
+                :class="actionButtonClass()"
+                :aria-label="props.previousVersionLabel"
+                :title="props.previousVersionLabel"
+                :disabled="message.regenerating || message.version <= 0"
+                @click="handlePaginate(message, message.version - 1)"
+              >
+                <ChevronLeftIcon />
+              </Button>
+              <span
+                data-slot="chat-pagination-status"
+                data-action="pagination-status"
+                :class="actionStatusClass()"
+              >
+                {{ paginationStatus(message) }}
+              </span>
+              <Button
+                data-slot="chat-pagination-next"
+                type="button"
+                variant="outline"
+                size="icon-sm"
+                :class="actionButtonClass()"
+                :aria-label="props.nextVersionLabel"
+                :title="props.nextVersionLabel"
+                :disabled="message.regenerating || message.version >= message.versionCount - 1"
+                @click="handlePaginate(message, message.version + 1)"
+              >
+                <ChevronRightIcon />
+              </Button>
+            </template>
+            <Button
+              v-for="action in inlineSingleActionItems(message)"
+              :key="action"
+              :data-slot="actionSlot(action)"
+              :data-action="action"
+              type="button"
+              variant="outline"
+              size="icon-sm"
+              :class="actionButtonClass()"
+              :aria-label="actionLabel(action, message)"
+              :title="actionLabel(action, message)"
+              :disabled="isSingleActionDisabled(action, message)"
+              @click="handleSingleAction(action, message)"
+            >
+              <Spinner
+                v-if="action === 'regenerate' && message.regenerating"
+                decorative
+              />
+              <component
+                :is="actionIcons[action]"
+                v-else
+              />
+              <span class="sr-only">{{ actionLabel(action, message) }}</span>
+            </Button>
+            <template v-if="hasActionMenu(message)">
+              <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                  <Button
+                    data-slot="chat-action-menu-trigger"
+                    type="button"
+                    variant="outline"
+                    size="icon-sm"
+                    :class="actionButtonClass()"
+                    :aria-label="props.moreActionsLabel"
+                    :title="props.moreActionsLabel"
+                  >
+                    <MoreHorizontalIcon />
+                    <span class="sr-only">{{ props.moreActionsLabel }}</span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  :align="message.side === 'right' ? 'end' : 'start'"
+                  class="min-w-44"
+                >
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem
+                      v-for="action in menuActionItems(message)"
+                      :key="action"
+                      :data-action="action"
+                      :disabled="isSingleActionDisabled(action, message)"
+                      @click="handleSingleAction(action, message)"
+                    >
+                      <component
+                        :is="actionIcons[action]"
+                      />
+                      {{ actionLabel(action, message) }}
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </template>
+            <slot
+              v-if="slots[sideActionSlotName(message)]"
+              :name="sideActionSlotName(message)"
+              v-bind="actionSlotProps(message)"
+            />
+            <slot
+              v-else
+              name="message-actions"
+              v-bind="actionSlotProps(message)"
+            />
+          </div>
+        </div>
+      </div>
+      </template>
+    </div>
+  </section>
+</template>