@slexn/codecenter-ui 1.0.0

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

@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import type { Component, HTMLAttributes } from "vue"
+import {
+  AudioLinesIcon,
+  FileArchiveIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileImageIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  FileVideoCameraIcon,
+} from "@lucide/vue"
+import { cn } from "@/lib/utils"
+import type { ChatAttachment, ChatSide } from "./types"
+
+type ChatFileKind =
+  | "archive"
+  | "audio"
+  | "code"
+  | "document"
+  | "image"
+  | "spreadsheet"
+  | "unknown"
+  | "video"
+
+interface ChatAttachmentsProps {
+  attachments: ChatAttachment[]
+  class?: HTMLAttributes["class"]
+  side?: ChatSide
+}
+
+const props = withDefaults(defineProps<ChatAttachmentsProps>(), {
+  side: "left",
+})
+
+const codeExtensions = new Set([
+  "astro",
+  "c",
+  "cpp",
+  "css",
+  "go",
+  "html",
+  "java",
+  "js",
+  "jsx",
+  "json",
+  "kt",
+  "mdx",
+  "php",
+  "py",
+  "rb",
+  "rs",
+  "scss",
+  "sh",
+  "swift",
+  "ts",
+  "tsx",
+  "vue",
+  "xml",
+  "yaml",
+  "yml",
+])
+const documentExtensions = new Set([
+  "doc",
+  "docx",
+  "md",
+  "pdf",
+  "rtf",
+  "txt",
+])
+const imageExtensions = new Set([
+  "avif",
+  "gif",
+  "heic",
+  "jpeg",
+  "jpg",
+  "png",
+  "svg",
+  "webp",
+])
+const spreadsheetExtensions = new Set([
+  "csv",
+  "numbers",
+  "ods",
+  "tsv",
+  "xls",
+  "xlsx",
+])
+const archiveExtensions = new Set([
+  "7z",
+  "gz",
+  "rar",
+  "tar",
+  "tgz",
+  "zip",
+])
+const audioExtensions = new Set([
+  "aac",
+  "flac",
+  "m4a",
+  "mp3",
+  "ogg",
+  "wav",
+])
+const videoExtensions = new Set([
+  "avi",
+  "m4v",
+  "mkv",
+  "mov",
+  "mp4",
+  "webm",
+])
+
+function attachmentKey(attachment: ChatAttachment, index: number) {
+  return attachment.id ?? `${attachment.name}-${index}`
+}
+
+function normalizeExtension(extension?: string) {
+  return extension?.replace(/^\./, "").trim().toLowerCase() || undefined
+}
+
+function extensionFromName(name: string) {
+  const cleanName = name.split(/[?#]/)[0] ?? name
+  const lastDotIndex = cleanName.lastIndexOf(".")
+
+  if (lastDotIndex <= 0 || lastDotIndex === cleanName.length - 1) {
+    return undefined
+  }
+
+  return normalizeExtension(cleanName.slice(lastDotIndex + 1))
+}
+
+function fileExtension(attachment: ChatAttachment) {
+  return normalizeExtension(attachment.extension) ??
+    extensionFromName(attachment.name) ??
+    extensionFromName(attachment.url ?? "")
+}
+
+function fileKind(attachment: ChatAttachment): ChatFileKind {
+  const extension = fileExtension(attachment)
+
+  if (extension) {
+    if (codeExtensions.has(extension)) return "code"
+    if (documentExtensions.has(extension)) return "document"
+    if (imageExtensions.has(extension)) return "image"
+    if (spreadsheetExtensions.has(extension)) return "spreadsheet"
+    if (archiveExtensions.has(extension)) return "archive"
+    if (audioExtensions.has(extension)) return "audio"
+    if (videoExtensions.has(extension)) return "video"
+  }
+
+  const type = attachment.type?.toLowerCase()
+
+  if (!type) return "unknown"
+  if (type.includes("image")) return "image"
+  if (type.includes("video")) return "video"
+  if (type.includes("audio")) return "audio"
+  if (type.includes("zip") || type.includes("archive")) return "archive"
+  if (type.includes("csv") || type.includes("sheet") || type.includes("excel")) {
+    return "spreadsheet"
+  }
+  if (
+    type.includes("code") ||
+    type.includes("javascript") ||
+    type.includes("json") ||
+    type.includes("typescript")
+  ) {
+    return "code"
+  }
+  if (type.includes("pdf") || type.includes("text") || type.includes("document")) {
+    return "document"
+  }
+
+  return "unknown"
+}
+
+function attachmentIcon(attachment: ChatAttachment): Component {
+  const iconByKind: Record<ChatFileKind, Component> = {
+    archive: FileArchiveIcon,
+    audio: AudioLinesIcon,
+    code: FileCodeIcon,
+    document: FileTextIcon,
+    image: FileImageIcon,
+    spreadsheet: FileSpreadsheetIcon,
+    unknown: FileIcon,
+    video: FileVideoCameraIcon,
+  }
+
+  return iconByKind[fileKind(attachment)]
+}
+
+function attachmentTypeLabel(attachment: ChatAttachment) {
+  return attachment.type ?? fileExtension(attachment)?.toUpperCase()
+}
+
+function attachmentMeta(attachment: ChatAttachment) {
+  return [attachmentTypeLabel(attachment), attachment.size]
+    .filter(Boolean)
+    .join(" / ")
+}
+
+function attachmentLinkAttrs(attachment: ChatAttachment) {
+  if (!attachment.url) return {}
+
+  return {
+    href: attachment.url,
+    rel: "noreferrer",
+    target: "_blank",
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="props.attachments.length > 0"
+    data-slot="chat-attachments"
+    :data-side="props.side"
+    :class="
+      cn(
+        'flex max-w-full flex-col gap-2',
+        props.side === 'right' ? 'items-end' : 'items-start',
+        props.class,
+      )
+    "
+  >
+    <component
+      :is="attachment.url ? 'a' : 'div'"
+      v-for="(attachment, index) in props.attachments"
+      :key="attachmentKey(attachment, index)"
+      v-bind="attachmentLinkAttrs(attachment)"
+      data-slot="chat-attachment"
+      :data-file-kind="fileKind(attachment)"
+      :data-file-extension="fileExtension(attachment)"
+      :title="attachment.name"
+      class="flex w-64 max-w-full min-w-0 items-center gap-3 rounded-lg bg-muted px-3 py-2 text-left text-xs text-foreground no-underline transition-colors hover:bg-muted/80 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+    >
+      <span
+        v-if="attachment.thumbnailUrl"
+        data-slot="chat-attachment-preview"
+        class="flex size-9 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground"
+      >
+        <img
+          :alt="attachment.alt ?? attachment.name"
+          class="size-full rounded-md object-cover"
+          :src="attachment.thumbnailUrl"
+        />
+      </span>
+      <span
+        v-else
+        data-slot="chat-attachment-icon"
+        class="flex size-9 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground"
+      >
+        <component
+          :is="attachmentIcon(attachment)"
+          aria-hidden="true"
+        />
+      </span>
+      <span
+        data-slot="chat-attachment-body"
+        class="flex min-w-0 flex-col"
+      >
+        <span
+          data-slot="chat-attachment-name"
+          class="truncate font-medium"
+        >
+          {{ attachment.name }}
+        </span>
+        <span
+          v-if="attachmentMeta(attachment)"
+          data-slot="chat-attachment-meta"
+          class="truncate text-current/65"
+        >
+          {{ attachmentMeta(attachment) }}
+        </span>
+      </span>
+    </component>
+  </div>
+</template>

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

@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue"
+import { CheckIcon, CopyIcon, Maximize2Icon, Minimize2Icon } from "@lucide/vue"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import {
+  chatCodeBlockDefaults,
+  type ChatCodeBlockEmits,
+  type ChatCodeBlockProps,
+} from "./code-block"
+import { codeLineNumberWidth, createCodeLines } from "@/lib/code-highlight"
+
+const props = withDefaults(
+  defineProps<ChatCodeBlockProps>(),
+  chatCodeBlockDefaults,
+)
+
+const emit = defineEmits<ChatCodeBlockEmits>()
+
+const copied = ref(false)
+const expanded = ref(false)
+let copiedTimer: ReturnType<typeof setTimeout> | undefined
+let previousBodyOverflow: string | undefined
+
+const codeLines = computed(() => createCodeLines(
+  props.code,
+  props.language,
+  props.highlight,
+))
+const visibleLineCount = computed(() =>
+  Math.max(1, Math.trunc(props.maxVisibleLines)),
+)
+const shouldScroll = computed(() => codeLines.value.length > visibleLineCount.value)
+const languageLabel = computed(() => props.language || props.label)
+const codeLineStyle = computed(() => ({
+  gridTemplateColumns: props.lineNumbers
+    ? `${codeLineNumberWidth(codeLines.value.length)} minmax(0, 1fr)`
+    : "minmax(0, 1fr)",
+}))
+const collapsedScrollStyle = computed(() => shouldScroll.value
+  ? {
+      maxHeight: `${visibleLineCount.value * 1.5 + 2}rem`,
+    }
+  : undefined)
+
+async function copyCode() {
+  try {
+    if (typeof navigator !== "undefined") {
+      await navigator.clipboard?.writeText(props.code)
+    }
+  } catch {
+    // Clipboard permissions vary by browser; the component still reports intent.
+  }
+
+  emit("copy", props.code)
+  copied.value = true
+
+  if (copiedTimer) clearTimeout(copiedTimer)
+  copiedTimer = setTimeout(() => {
+    copied.value = false
+  }, 1200)
+}
+
+function openExpanded() {
+  expanded.value = true
+}
+
+function closeExpanded() {
+  expanded.value = false
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape") closeExpanded()
+}
+
+watch(expanded, (isExpanded) => {
+  if (typeof document === "undefined" || typeof window === "undefined") return
+
+  if (isExpanded) {
+    previousBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+    window.addEventListener("keydown", handleKeydown)
+    return
+  }
+
+  document.body.style.overflow = previousBodyOverflow ?? ""
+  previousBodyOverflow = undefined
+  window.removeEventListener("keydown", handleKeydown)
+})
+
+onBeforeUnmount(() => {
+  if (copiedTimer) clearTimeout(copiedTimer)
+
+  if (typeof document !== "undefined") {
+    document.body.style.overflow = previousBodyOverflow ?? ""
+  }
+  if (typeof window !== "undefined") {
+    window.removeEventListener("keydown", handleKeydown)
+  }
+})
+</script>
+
+<template>
+  <div
+    data-slot="chat-code-block"
+    :data-language="props.language"
+    :data-scrollable="shouldScroll ? '' : undefined"
+    :class="
+      cn(
+        'relative w-full min-w-0 max-w-full overflow-hidden rounded-xl border font-mono text-[13px] leading-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <div
+      data-slot="chat-code-toolbar"
+      class="absolute top-2 right-2 z-10 flex max-w-[calc(100%-1rem)] items-center gap-1 rounded-md border px-1 py-0.5"
+    >
+      <span
+        data-slot="chat-code-language"
+        class="max-w-20 truncate px-1 text-xs"
+      >
+        {{ languageLabel }}
+      </span>
+      <Button
+        data-slot="chat-code-copy"
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        class="size-7 rounded-md"
+        :aria-label="copied ? props.copiedLabel : props.copyLabel"
+        :title="copied ? props.copiedLabel : props.copyLabel"
+        @click="copyCode"
+      >
+        <CheckIcon v-if="copied" />
+        <CopyIcon v-else />
+      </Button>
+      <Button
+        data-slot="chat-code-expand-trigger"
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        class="size-7 rounded-md"
+        :aria-label="props.expandLabel"
+        :title="props.expandLabel"
+        @click="openExpanded"
+      >
+        <Maximize2Icon />
+      </Button>
+    </div>
+
+    <pre
+      data-slot="chat-code-scroll"
+      :data-scrollable="shouldScroll ? '' : undefined"
+      :class="
+        cn(
+          'm-0 overflow-x-auto text-[13px] leading-6 [tab-size:2]',
+          shouldScroll ? 'overflow-y-auto' : 'overflow-y-hidden',
+        )
+      "
+      :style="collapsedScrollStyle"
+    ><code
+      data-slot="chat-code"
+      :data-language="props.language"
+      class="block min-w-max font-mono whitespace-pre"
+    ><span
+      v-for="line in codeLines"
+      :key="line.number"
+      data-slot="chat-code-line"
+      :data-diff="line.diffType"
+      :data-line="line.number"
+      class="grid min-w-full w-max"
+      :style="codeLineStyle"
+    ><span
+      v-if="props.lineNumbers"
+      data-slot="chat-code-line-number"
+      aria-hidden="true"
+      class="sticky left-0 w-full select-none border-r pl-2 pr-3 text-right tabular-nums"
+    >{{ line.number }}</span><span
+      data-slot="chat-code-line-content"
+      class="block min-h-[1lh] pl-3 pr-4"
+    ><span
+      v-if="line.isEmpty"
+      aria-hidden="true"
+    >&nbsp;</span><span
+      v-else
+      data-slot="chat-code-token"
+      v-html="line.html"
+    /></span></span></code></pre>
+  </div>
+
+  <Teleport to="body">
+    <div
+      v-if="expanded"
+      data-slot="chat-code-dialog-overlay"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4"
+      @click.self="closeExpanded"
+    >
+      <section
+        data-slot="chat-code-dialog"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="props.expandLabel"
+        class="grid w-full max-w-6xl grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-2xl border shadow-2xl"
+      >
+        <h2 class="sr-only">
+          {{ props.expandLabel }}
+        </h2>
+        <div
+          data-slot="chat-code-dialog-header"
+          class="flex h-11 items-center justify-between gap-3 border-b px-4"
+        >
+          <span
+            data-slot="chat-code-language"
+            class="min-w-0 truncate text-xs"
+          >
+            {{ languageLabel }}
+          </span>
+          <div class="flex shrink-0 items-center gap-1">
+            <Button
+              data-slot="chat-code-copy"
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              class="size-8 rounded-md"
+              :aria-label="copied ? props.copiedLabel : props.copyLabel"
+              :title="copied ? props.copiedLabel : props.copyLabel"
+              @click="copyCode"
+            >
+              <CheckIcon v-if="copied" />
+              <CopyIcon v-else />
+            </Button>
+            <Button
+              data-slot="chat-code-collapse-trigger"
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              class="size-8 rounded-md"
+              :aria-label="props.closeLabel"
+              :title="props.closeLabel"
+              @click="closeExpanded"
+            >
+              <Minimize2Icon />
+            </Button>
+          </div>
+        </div>
+
+        <pre
+          data-slot="chat-code-scroll"
+          data-expanded
+          class="m-0 max-h-[calc(90vh-4rem)] overflow-auto text-[13px] leading-6 [tab-size:2]"
+        ><code
+          data-slot="chat-code"
+          :data-language="props.language"
+          class="block min-w-max font-mono whitespace-pre"
+        ><span
+          v-for="line in codeLines"
+          :key="line.number"
+          data-slot="chat-code-line"
+          :data-diff="line.diffType"
+          :data-line="line.number"
+          class="grid min-w-full w-max"
+          :style="codeLineStyle"
+        ><span
+          v-if="props.lineNumbers"
+          data-slot="chat-code-line-number"
+          aria-hidden="true"
+          class="sticky left-0 w-full select-none border-r pl-2 pr-3 text-right tabular-nums"
+        >{{ line.number }}</span><span
+          data-slot="chat-code-line-content"
+          class="block min-h-[1lh] pl-3 pr-4"
+        ><span
+          v-if="line.isEmpty"
+          aria-hidden="true"
+        >&nbsp;</span><span
+          v-else
+          data-slot="chat-code-token"
+          v-html="line.html"
+        /></span></span></code></pre>
+      </section>
+    </div>
+  </Teleport>
+</template>

package/src/components/ui/chat/code-block.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from "vue"
+
+export interface ChatCodeBlockProps {
+  class?: HTMLAttributes["class"]
+  closeLabel?: string
+  code: string
+  copiedLabel?: string
+  copyLabel?: string
+  expandLabel?: string
+  highlight?: boolean
+  label?: string
+  language?: string
+  lineNumbers?: boolean
+  maxVisibleLines?: number
+}
+
+export type ChatCodeBlockEmits = {
+  copy: [code: string]
+}
+
+export const chatCodeBlockDefaults = {
+  closeLabel: "닫기",
+  copiedLabel: "복사됨",
+  copyLabel: "코드 복사",
+  expandLabel: "크게 보기",
+  highlight: true,
+  label: "Code",
+  lineNumbers: true,
+  maxVisibleLines: 20,
+} satisfies Partial<ChatCodeBlockProps>

package/src/components/ui/chat/index.ts

@@ -0,0 +1,24 @@
+export { default as Chat } from "./Chat.vue"
+export { default as ChatAttachments } from "./ChatAttachments.vue"
+export { default as ChatCodeBlock } from "./ChatCodeBlock.vue"
+export type {
+  ChatCodeBlockEmits,
+  ChatCodeBlockProps,
+} from "./code-block"
+export type {
+  ChatActionSlotProps,
+  ChatAttachmentSlotProps,
+  ChatContentSlotProps,
+  ChatMessage,
+  ChatMessageSlotProps,
+  ChatProfile,
+  ChatResolvedMessage,
+} from "./Chat.vue"
+export type {
+  ChatActionKey,
+  ChatActionVisibility,
+  ChatAttachment,
+  ChatSide,
+  ChatStatus,
+  ChatVariant,
+} from "./types"

package/src/components/ui/chat/types.ts

@@ -0,0 +1,23 @@
+export type ChatAttachment = {
+  alt?: string
+  extension?: string
+  id?: number | string
+  name: string
+  size?: string
+  thumbnailUrl?: string
+  type?: string
+  url?: string
+}
+
+export type ChatActionVisibility = "always" | "hover"
+export type ChatActionKey =
+  | "bookmark"
+  | "branch"
+  | "copy"
+  | "download"
+  | "edit"
+  | "pagination"
+  | "regenerate"
+export type ChatSide = "left" | "right"
+export type ChatStatus = "complete" | "error" | "streaming"
+export type ChatVariant = "bubble" | "plain"

package/src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Check } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-slot="slotProps"
+    data-slot="checkbox"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="grid place-content-center text-current transition-none"
+    >
+      <slot v-bind="slotProps">
+        <Check class="size-3.5" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/src/components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue"