@slexn/codecenter-ui 1.0.0

package/src/components/ui/prompt-input/index.ts

@@ -0,0 +1,14 @@
+export { default as PromptInput } from "./PromptInput.vue"
+export type {
+  PromptInputAddAction,
+  PromptInputAddActionKey,
+  PromptInputAttachment,
+  PromptInputAttachmentKind,
+  PromptInputCommand,
+  PromptInputCommandData,
+  PromptInputCommandDataValue,
+  PromptInputCommandPayload,
+  PromptInputCommandRemovePayload,
+  PromptInputModel,
+  PromptInputSubmitPayload,
+} from "./types"

package/src/components/ui/prompt-input/types.ts

@@ -0,0 +1,78 @@
+import type { Component } from "vue"
+
+export type PromptInputAddActionKey = "attachment" | "mcp" | (string & {})
+
+export interface PromptInputAddAction {
+  disabled?: boolean
+  icon?: Component
+  key: PromptInputAddActionKey
+  label: string
+}
+
+export type PromptInputAttachmentKind = "file" | "image"
+
+export interface PromptInputAttachment {
+  file: File
+  id: string
+  kind: PromptInputAttachmentKind
+  name: string
+  previewUrl?: string
+  size: number
+  type: string
+}
+
+export type PromptInputCommandDataValue =
+  | boolean
+  | null
+  | number
+  | string
+  | PromptInputCommandDataValue[]
+  | { [key: string]: PromptInputCommandDataValue }
+
+export type PromptInputCommandData = Record<string, PromptInputCommandDataValue>
+
+export interface PromptInputCommand {
+  action?: (payload: PromptInputCommandPayload) => void
+  cancel?: (payload: PromptInputCommandRemovePayload) => void
+  description?: string
+  disabled?: boolean
+  icon?: Component
+  insert?: string
+  label: string
+  payload?:
+    | PromptInputCommandData
+    | ((payload: PromptInputCommandPayload) => PromptInputCommandData)
+  value: string
+}
+
+export interface PromptInputCommandPayload {
+  command: PromptInputCommand
+  commandPayload: PromptInputCommandData
+  nextCommandPayload: PromptInputCommandData
+  nextValue: string
+  query: string
+  trigger: string
+  value: string
+}
+
+export interface PromptInputCommandRemovePayload {
+  command: PromptInputCommand
+  commandPayload: PromptInputCommandData
+  nextCommandPayload: PromptInputCommandData
+  removedPayload: PromptInputCommandData
+}
+
+export interface PromptInputModel {
+  disabled?: boolean
+  icon?: Component
+  label: string
+  value: string
+}
+
+export interface PromptInputSubmitPayload {
+  attachments: PromptInputAttachment[]
+  commandPayload: PromptInputCommandData
+  model: string
+  modelOption?: PromptInputModel
+  value: string
+}

package/src/components/ui/radio-group/RadioGroup.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { RadioGroupRootEmits, RadioGroupRootProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<RadioGroupRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    orientation: "vertical",
+  },
+)
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-slot="slotProps"
+    data-slot="radio-group"
+    v-bind="forwarded"
+    :class="
+      cn(
+        props.orientation === 'horizontal'
+          ? 'flex flex-wrap items-center gap-4'
+          : 'grid gap-3',
+        props.class,
+      )
+    "
+  >
+    <slot v-bind="slotProps" />
+  </RadioGroupRoot>
+</template>

package/src/components/ui/radio-group/RadioGroupItem.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { RadioGroupItemEmits, RadioGroupItemProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<
+  RadioGroupItemProps & {
+    class?: HTMLAttributes["class"]
+    indicatorClass?: HTMLAttributes["class"]
+  }
+>()
+const emits = defineEmits<RadioGroupItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "indicatorClass")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 relative flex size-4 shrink-0 items-center justify-center rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      data-slot="radio-group-indicator"
+      :class="
+        cn(
+          'flex size-full items-center justify-center after:block after:size-2 after:rounded-full after:bg-current',
+          props.indicatorClass,
+        )
+      "
+    />
+  </RadioGroupItem>
+</template>

package/src/components/ui/radio-group/RadioGroupOption.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { RadioGroupItemProps } from "reka-ui"
+import { computed, useId } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+import RadioGroupItem from "./RadioGroupItem.vue"
+
+const props = defineProps<
+  RadioGroupItemProps & {
+    class?: HTMLAttributes["class"]
+    description?: string
+    descriptionClass?: HTMLAttributes["class"]
+    indicatorClass?: HTMLAttributes["class"]
+    itemClass?: HTMLAttributes["class"]
+    label?: string
+    labelClass?: HTMLAttributes["class"]
+  }
+>()
+
+const generatedId = useId()
+const optionId = computed(() => props.id ?? generatedId)
+const delegatedProps = reactiveOmit(
+  props,
+  "class",
+  "description",
+  "descriptionClass",
+  "id",
+  "indicatorClass",
+  "itemClass",
+  "label",
+  "labelClass",
+)
+</script>
+
+<template>
+  <div
+    data-slot="radio-group-option"
+    :data-disabled="props.disabled ? '' : undefined"
+    :class="
+      cn(
+        'flex items-start gap-3',
+        props.disabled && 'opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupItem
+      v-bind="delegatedProps"
+      :id="optionId"
+      :class="props.itemClass"
+      :indicator-class="props.indicatorClass"
+    />
+
+    <div class="grid gap-1 leading-none">
+      <label
+        v-if="props.label || $slots.default"
+        data-slot="radio-group-label"
+        :for="optionId"
+        :class="
+          cn(
+            'text-sm font-medium leading-none text-foreground',
+            props.disabled && 'cursor-not-allowed',
+            props.labelClass,
+          )
+        "
+      >
+        <slot>{{ props.label }}</slot>
+      </label>
+
+      <p
+        v-if="props.description"
+        data-slot="radio-group-description"
+        :class="cn('text-xs leading-relaxed text-muted-foreground', props.descriptionClass)"
+      >
+        {{ props.description }}
+      </p>
+    </div>
+  </div>
+</template>

package/src/components/ui/radio-group/index.ts

@@ -0,0 +1,3 @@
+export { default as RadioGroup } from "./RadioGroup.vue"
+export { default as RadioGroupItem } from "./RadioGroupItem.vue"
+export { default as RadioGroupOption } from "./RadioGroupOption.vue"

package/src/components/ui/reasoning/Reasoning.vue

@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import { computed, ref, useId, watch } from "vue"
+import type { Component } from "vue"
+import {
+  BrainIcon,
+  ChevronDownIcon,
+  CircleAlertIcon,
+} from "@lucide/vue"
+import { cn } from "@/lib/utils"
+import type {
+  ReasoningDuration,
+  ReasoningProps,
+  ReasoningStatus,
+  ReasoningStepStatus,
+} from "./types"
+
+const props = withDefaults(defineProps<ReasoningProps>(), {
+  ariaLive: "polite",
+  collapsible: true,
+  defaultOpen: true,
+  status: "complete",
+  title: "Thought",
+})
+
+const emit = defineEmits<{
+  "update:open": [open: boolean]
+}>()
+
+const slots = defineSlots<{
+  default?: () => unknown
+  footer?: () => unknown
+  summary?: (props: { duration?: ReasoningDuration; status: ReasoningStatus }) => unknown
+}>()
+
+const contentId = `reasoning-content-${useId()}`
+const uncontrolledOpen = ref(props.open ?? props.defaultOpen)
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open !== undefined) {
+      uncontrolledOpen.value = open
+    }
+  },
+)
+
+const isOpen = computed({
+  get: () => props.open ?? uncontrolledOpen.value,
+  set: (open: boolean) => {
+    uncontrolledOpen.value = open
+    emit("update:open", open)
+  },
+})
+
+const statusIconByStatus: Record<ReasoningStatus, Component> = {
+  complete: BrainIcon,
+  error: CircleAlertIcon,
+  thinking: BrainIcon,
+}
+
+const statusLabelByStatus: Record<ReasoningStatus, string> = {
+  complete: "Thought",
+  error: "Reasoning failed",
+  thinking: "Thinking",
+}
+
+const headerIcon = computed(() => props.icon ?? statusIconByStatus[props.status])
+const formattedDuration = computed(() => formatDuration(props.duration))
+const headerText = computed(() =>
+  props.summary ?? (props.status === "complete" ? props.title : statusLabelByStatus[props.status]),
+)
+const visibleSteps = computed(() => props.steps ?? [])
+const hasBody = computed(() => Boolean(props.content || slots.default))
+const hasContent = computed(() =>
+  hasBody.value || visibleSteps.value.length > 0 || Boolean(slots.footer),
+)
+
+function toggleOpen() {
+  if (!props.collapsible) return
+  isOpen.value = !isOpen.value
+}
+
+function formatDuration(duration: ReasoningProps["duration"]) {
+  if (duration === undefined || duration === "") return undefined
+
+  if (typeof duration === "number") {
+    return formatDurationParts(duration)
+  }
+
+  const parsedDuration = parseDurationString(duration)
+  return parsedDuration === undefined ? duration : formatDurationParts(parsedDuration)
+}
+
+function parseDurationString(duration: string) {
+  const value = duration.trim().toLowerCase()
+
+  if (/^\d+(?:\.\d+)?$/.test(value)) {
+    return Number(value)
+  }
+
+  const matches = [
+    ...value.matchAll(
+      /(\d+(?:\.\d+)?)\s*(hours?|hrs?|h|minutes?|mins?|m(?!s)|seconds?|secs?|s)\b/g,
+    ),
+  ]
+
+  if (!matches.length) return undefined
+
+  return matches.reduce((totalSeconds, match) => {
+    const amount = Number(match[1])
+    const unit = match[2]
+
+    if (unit.startsWith("h")) return totalSeconds + amount * 3600
+    if (unit.startsWith("min") || unit === "m") return totalSeconds + amount * 60
+
+    return totalSeconds + amount
+  }, 0)
+}
+
+function formatDurationParts(duration: number) {
+  const totalSeconds = Math.max(0, Math.round(duration))
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+  const parts: string[] = []
+
+  if (hours) parts.push(`${hours}h`)
+  if (minutes) parts.push(`${minutes}m`)
+  if (seconds || !parts.length) parts.push(`${seconds}s`)
+
+  return parts.join(" ")
+}
+
+function getStepMarkerClass(status: ReasoningStepStatus = "pending") {
+  return cn(
+    "mt-2 size-1.5 rounded-full",
+    status === "complete" && "bg-foreground/60",
+    status === "current" && "bg-foreground",
+    status === "error" && "bg-destructive",
+    status === "pending" && "bg-border",
+  )
+}
+</script>
+
+<template>
+  <section
+    data-slot="reasoning"
+    :data-status="props.status"
+    :data-open="isOpen ? 'true' : 'false'"
+    :aria-live="props.ariaLive"
+    :class="
+      cn(
+        'w-full text-muted-foreground',
+        props.class,
+      )
+    "
+  >
+    <component
+      :is="props.collapsible ? 'button' : 'div'"
+      data-slot="reasoning-header"
+      :type="props.collapsible ? 'button' : undefined"
+      :aria-controls="props.collapsible ? contentId : undefined"
+      :aria-expanded="props.collapsible ? isOpen : undefined"
+      :class="
+        cn(
+          'group inline-flex min-h-8 max-w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-sm text-muted-foreground',
+          props.collapsible &&
+            'cursor-pointer transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
+          props.headerClass,
+        )
+      "
+      @click="toggleOpen"
+    >
+      <component
+        :is="headerIcon"
+        data-slot="reasoning-icon"
+        aria-hidden="true"
+        :class="
+          cn(
+            'size-4 shrink-0',
+            props.status === 'error' && 'text-destructive',
+            props.status === 'thinking' && 'animate-pulse',
+            props.iconClass,
+          )
+        "
+      />
+
+      <span
+        data-slot="reasoning-summary"
+        class="flex min-w-0 items-center gap-1.5"
+      >
+        <span
+          data-slot="reasoning-title"
+          class="min-w-0 truncate font-medium leading-6 text-foreground/80"
+        >
+          <slot
+            name="summary"
+            :duration="formattedDuration"
+            :status="props.status"
+          >
+            {{ headerText }}
+          </slot>
+        </span>
+
+        <span
+          v-if="formattedDuration && !$slots.summary"
+          data-slot="reasoning-duration"
+          class="shrink-0 text-xs leading-5 text-muted-foreground"
+        >
+          {{ formattedDuration }}
+        </span>
+      </span>
+
+      <ChevronDownIcon
+        v-if="props.collapsible"
+        data-slot="reasoning-chevron"
+        aria-hidden="true"
+        :class="
+          cn(
+            'size-3.5 shrink-0 transition-transform group-hover:text-foreground',
+            isOpen && 'rotate-180',
+          )
+        "
+      />
+    </component>
+
+    <div
+      v-show="!props.collapsible || isOpen"
+      v-if="hasContent"
+      :id="contentId"
+      data-slot="reasoning-content"
+      :class="cn('mt-3 border-l pl-5', props.contentClass)"
+    >
+      <div
+        v-if="hasBody"
+        data-slot="reasoning-body"
+        class="whitespace-pre-wrap text-sm leading-7 text-muted-foreground"
+      >
+        <slot>{{ props.content }}</slot>
+      </div>
+
+      <ol
+        v-if="visibleSteps.length"
+        data-slot="reasoning-steps"
+        :class="cn('grid gap-4 text-sm leading-7 text-muted-foreground', hasBody && 'mt-5')"
+      >
+        <li
+          v-for="(step, index) in visibleSteps"
+          :key="`${step.title}-${index}`"
+          data-slot="reasoning-step"
+          :data-status="step.status ?? 'pending'"
+          class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1"
+        >
+          <span
+            data-slot="reasoning-step-marker"
+            aria-hidden="true"
+            :class="getStepMarkerClass(step.status)"
+          />
+
+          <span data-slot="reasoning-step-title" class="font-medium text-foreground/75">
+            {{ step.title }}
+          </span>
+          <span
+            v-if="step.description"
+            data-slot="reasoning-step-description"
+            class="col-start-2"
+          >
+            {{ step.description }}
+          </span>
+        </li>
+      </ol>
+
+      <div v-if="$slots.footer" data-slot="reasoning-footer" class="mt-4 text-sm">
+        <slot name="footer" />
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,8 @@
+export { default as Reasoning } from "./Reasoning.vue"
+export type {
+  ReasoningDuration,
+  ReasoningProps,
+  ReasoningStatus,
+  ReasoningStep,
+  ReasoningStepStatus,
+} from "./types"

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

@@ -0,0 +1,29 @@
+import type { Component, HTMLAttributes } from "vue"
+
+export type ReasoningStatus = "complete" | "error" | "thinking"
+export type ReasoningStepStatus = "complete" | "current" | "error" | "pending"
+export type ReasoningDuration = number | string
+
+export interface ReasoningStep {
+  description?: string
+  status?: ReasoningStepStatus
+  title: string
+}
+
+export interface ReasoningProps {
+  ariaLive?: "assertive" | "off" | "polite"
+  class?: HTMLAttributes["class"]
+  collapsible?: boolean
+  content?: string
+  contentClass?: HTMLAttributes["class"]
+  defaultOpen?: boolean
+  duration?: ReasoningDuration
+  headerClass?: HTMLAttributes["class"]
+  icon?: Component
+  iconClass?: HTMLAttributes["class"]
+  open?: boolean
+  steps?: ReasoningStep[]
+  status?: ReasoningStatus
+  summary?: string
+  title?: string
+}

package/src/components/ui/select/Select.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from "reka-ui"
+import { SelectRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot
+    v-slot="slotProps"
+    data-slot="select"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </SelectRoot>
+</template>