@aleph-alpha/chat-kit 2.2.0 → 3.0.0

package/src/components/base/CkPromptInput/CkPromptInput.vue

@@ -1,14 +1,31 @@
 <script setup lang="ts">
 import type { CkPromptInputProps } from './types';
-import { computed, nextTick, useId, useTemplateRef, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUpdated,
+  ref,
+  useId,
+  useSlots,
+  useTemplateRef,
+  watch,
+} from 'vue';
 
 defineOptions({ name: 'CkPromptInput' });
 
+// Pixel height of one rendered line — must match the textarea's `leading-6`
+// (24 px). Used to derive how many lines the current content occupies.
+const LINE_HEIGHT = 24;
+
+// Cap the textarea at 6 visible lines; content beyond that scrolls inside.
+const MAX_LINES = 6;
+const MAX_HEIGHT = LINE_HEIGHT * MAX_LINES;
+
 const props = withDefaults(defineProps<CkPromptInputProps>(), {
   modelValue: '',
   placeholder: undefined,
   disabled: false,
-  maxHeight: 200,
   ariaLabel: undefined,
 });
 
@@ -19,21 +36,74 @@ const emit = defineEmits<{
 
 const textareaId = useId();
 const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef');
+const slots = useSlots();
+
+// Latches to `true` once content spans 2+ lines (newline OR soft-wrap) and
+// stays there until the field is emptied. Without the latch, switching to the
+// wider two-row layout would let the text fit on one line again, flip us
+// back, and re-wrap — an infinite toggle loop.
+const isMultiLine = ref(false);
 
 const isEmpty = computed(() => props.modelValue.trim() === '');
 const isSubmitDisabled = computed(() => props.disabled || isEmpty.value);
+// `useSlots()` is reactive for *static* slot provision (the parent always
+// passes `#toolbar-top` and merely changes its inner content) but NOT when
+// the parent flips slot presence via `<template v-if="…" #toolbar-top>`.
+// That parent-side v-if is our actual use case (file-pill row appears once
+// `files.length > 0`), so sync the boolean via the post-render hook —
+// onUpdated fires after every parent re-render, after slots are reconciled.
+const hasToolbarTop = ref(typeof slots['toolbar-top'] === 'function');
+function syncSlotState(): void {
+  const next = typeof slots['toolbar-top'] === 'function';
+  if (next !== hasToolbarTop.value) hasToolbarTop.value = next;
+}
+onMounted(syncSlotState);
+onUpdated(syncSlotState);
+
+// Compact form uses the larger 48 px corner radius; once a second row appears
+// (multi-line text OR toolbar-top filled with chips/attachments), the radius
+// drops to 24 px per Solea spec.
+const hasMultipleRows = computed(
+  () => isMultiLine.value || hasToolbarTop.value,
+);
+
+const gridAreas = computed(() => {
+  const top = hasToolbarTop.value ? '"top top top" ' : '';
+  return isMultiLine.value
+    ? `${top}"input input input" "left . right"`
+    : `${top}"left input right"`;
+});
 
 function adjustHeight(): void {
   const el = textareaRef.value;
   if (!el) return;
+
+  if (props.modelValue === '') {
+    isMultiLine.value = false;
+    el.style.height = '';
+    return;
+  }
+
+  // Collapse to natural content height first so the next scrollHeight read
+  // reflects what the content needs, not what the inline height is forcing.
   el.style.height = 'auto';
-  el.style.height = `${Math.min(el.scrollHeight, props.maxHeight)}px`;
+  const measured = el.scrollHeight;
+  el.style.height = `${Math.min(measured, MAX_HEIGHT)}px`;
+
+  // Latch only on a *real* second line: either explicit newline OR scrollHeight
+  // ≥ 2 × line-height. Using `Math.round` on a borderline 36 px (sub-pixel
+  // emoji/CJK rendering on Chromium/Linux) would falsely latch a single line.
+  const hasExplicitNewline = props.modelValue.includes('\n');
+  if (
+    !isMultiLine.value &&
+    (hasExplicitNewline || measured >= LINE_HEIGHT * 2)
+  ) {
+    isMultiLine.value = true;
+  }
 }
 
 function onInput(event: Event): void {
-  const value = (event.target as HTMLTextAreaElement).value;
-  emit('update:modelValue', value);
-  adjustHeight();
+  emit('update:modelValue', (event.target as HTMLTextAreaElement).value);
 }
 
 function submit(): void {
@@ -56,10 +126,9 @@ function focus(): void {
 
 watch(
   () => props.modelValue,
-  () => {
-    nextTick(adjustHeight);
-  },
+  () => nextTick(adjustHeight),
 );
+onMounted(adjustHeight);
 
 defineExpose({ focus, submit });
 </script>
@@ -67,38 +136,78 @@ defineExpose({ focus, submit });
 <template>
   <div class="flex flex-col gap-2">
     <form
-      class="border-core-border-default bg-core-bg-primary [&:has(textarea:focus)]:ring-core-border-focus flex flex-col gap-3 rounded-xl border px-4 pt-3 pb-3 shadow-sm [&:has(textarea:focus)]:ring-2"
+      :class="[
+        'ck-prompt-form border-border-surface-default bg-background-input-strong [&:has(textarea:focus)]:border-border-surface-focus-ring [&:has(textarea:focus)]:ring-border-surface-focus-ring/40 min-h-17 grid items-center gap-x-0 gap-y-5 border p-4 transition-[border-radius] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] [&:has(textarea:focus)]:ring-2',
+        hasMultipleRows ? 'rounded-2xl' : 'rounded-3xl',
+      ]"
+      :style="{
+        gridTemplateColumns: 'auto 1fr auto',
+        gridTemplateAreas: gridAreas,
+      }"
       @submit.prevent="submit"
     >
-      <label v-if="ariaLabel" :for="textareaId" class="sr-only">{{
-        ariaLabel
-      }}</label>
+      <div v-if="hasToolbarTop" style="grid-area: top">
+        <slot name="toolbar-top" />
+      </div>
+      <label v-if="ariaLabel" :for="textareaId" class="sr-only">
+        {{ ariaLabel }}
+      </label>
+      <div :class="[!isMultiLine && 'pr-2']" style="grid-area: left">
+        <slot name="toolbar-left" />
+      </div>
       <textarea
         :id="textareaId"
         ref="textareaRef"
-        rows="2"
+        rows="1"
         :value="modelValue"
         :placeholder="placeholder"
         :disabled="disabled"
-        class="text-core-content-primary placeholder-core-content-placeholder min-h-10 w-full resize-none bg-transparent text-sm leading-5 focus:outline-none"
+        style="grid-area: input"
+        :class="[
+          'ck-prompt-textarea text-content-on-surface-primary placeholder-content-on-surface-muted w-full min-w-0 resize-none overflow-y-auto bg-transparent py-0 font-sans text-base font-normal leading-6 max-h-36 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60',
+          isMultiLine ? 'pl-3 pr-3' : 'px-0',
+        ]"
         @input="onInput"
         @keydown="onKeydown"
       />
-      <div class="flex items-center justify-between">
-        <div v-if="$slots['toolbar-left']">
-          <slot name="toolbar-left" />
-        </div>
-        <div v-else />
-        <div class="ml-auto">
-          <slot
-            name="toolbar-right"
-            :submit="submit"
-            :disabled="isSubmitDisabled"
-            :is-empty="isEmpty"
-          />
-        </div>
+      <div :class="[!isMultiLine && 'pl-4']" style="grid-area: right">
+        <slot
+          name="toolbar-right"
+          :submit="submit"
+          :disabled="isSubmitDisabled"
+          :is-empty="isEmpty"
+        />
       </div>
     </form>
     <slot name="footer" />
   </div>
 </template>
+
+<style scoped>
+/* Solea two-layer drop shadow — warm grey + subtle orange tint. Matches the
+   `shadow/md/{1,2}` tokens from the design system; the generic `shadow-md`
+   utility from preset-wind4 uses a cold black-based shadow instead. */
+.ck-prompt-form {
+  box-shadow:
+    0 4px 6px -2px rgba(112, 95, 90, 0.1),
+    0 6px 14px -2px rgba(248, 94, 43, 0.05);
+}
+
+/* Slim styled scrollbar for the multi-line textarea — matches Figma's 4 px
+   muted-default track. Firefox uses the native `scrollbar-*` properties;
+   Chromium/WebKit needs the `::-webkit-scrollbar` pseudo-elements. */
+.ck-prompt-textarea {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(166, 141, 133, 0.3) transparent;
+}
+.ck-prompt-textarea::-webkit-scrollbar {
+  width: 4px;
+}
+.ck-prompt-textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+.ck-prompt-textarea::-webkit-scrollbar-thumb {
+  background: rgba(166, 141, 133, 0.3);
+  border-radius: 9999px;
+}
+</style>

package/src/components/base/CkPromptInput/types.ts

@@ -1,13 +1,17 @@
 /**
- * Low-level prompt input: a single auto-growing textarea with left/right toolbar
- * slots, a footer slot, and keyboard submission (Enter to submit, Shift+Enter
- * for newline). Use when you need full control over the prompt layout; for a
- * turnkey chat input use `CkInput` instead.
+ * Low-level prompt input: an auto-growing textarea (1–6 lines, then internal
+ * scroll) with `toolbar-top` / `toolbar-left` / `toolbar-right` / `footer`
+ * slots and keyboard submission (Enter to submit, Shift+Enter for newline).
+ * The form layout adapts between a compact single-row variant (large 3xl
+ * radius) and a stacked multi-row variant (2xl radius) automatically — driven
+ * by content height and whether `toolbar-top` is filled. Use when you need
+ * full control over the prompt layout; for a turnkey chat input use `CkInput`
+ * instead.
  *
  * @category Form Inputs
- * @useCases raw chat prompt textarea, custom prompt toolbar, auto-growing textarea, compose box, keyboard submit
- * @keywords prompt, input, textarea, chat, auto-grow, compose, submit, v-model
- * @related CkInput, CkPromptActionButton, CkPromptInputDisclaimer
+ * @useCases raw chat prompt textarea, custom prompt toolbar, auto-growing compose box, file-attachment chip row, multi-line chat input, keyboard submit
+ * @keywords prompt, input, textarea, chat, compose, submit, v-model, auto-grow, multi-line, toolbar
+ * @related CkInput, CkPromptSendButton, CkPromptStopButton, CkPromptMenuButton, CkPromptInputDisclaimer, CkFileItemsList
  */
 export interface CkPromptInputProps {
   /**
@@ -22,11 +26,6 @@ export interface CkPromptInputProps {
    * @default false
    */
   disabled?: boolean;
-  /**
-   * Maximum height (in px) before the textarea becomes scrollable.
-   * @default 200
-   */
-  maxHeight?: number;
   /** Accessible label for the textarea, hidden visually but read by assistive tech. */
   ariaLabel?: string;
 }

package/src/components/base/CkPromptMenuButton/CkPromptMenuButton.spec.ts

@@ -0,0 +1,62 @@
+import CkPromptMenuButton from './CkPromptMenuButton.vue';
+import { render, screen } from '@testing-library/vue';
+
+describe('CkPromptMenuButton', () => {
+  it('renders a default plus icon when the slot is empty', () => {
+    const { container } = render(CkPromptMenuButton, {
+      props: { ariaLabel: 'Open prompt menu' },
+    });
+
+    // Lucide's icon component renders an <svg> — assert at least one is present.
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('renders icon slot content when provided', () => {
+    render(CkPromptMenuButton, {
+      props: { ariaLabel: 'Open prompt menu' },
+      slots: { default: '<svg data-testid="icon"></svg>' },
+    });
+
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('passes ariaLabel to the underlying button', () => {
+    render(CkPromptMenuButton, {
+      props: { ariaLabel: 'Open prompt menu' },
+    });
+
+    expect(
+      screen.getByRole('button', { name: 'Open prompt menu' }),
+    ).toBeInTheDocument();
+  });
+
+  it('passes disabled state to the underlying button', () => {
+    render(CkPromptMenuButton, {
+      props: { ariaLabel: 'Open prompt menu', disabled: true },
+    });
+
+    expect(
+      screen.getByRole('button', { name: 'Open prompt menu' }),
+    ).toBeDisabled();
+  });
+
+  it('defaults type to button', () => {
+    render(CkPromptMenuButton, {
+      props: { ariaLabel: 'Open prompt menu' },
+    });
+
+    expect(
+      screen.getByRole('button', { name: 'Open prompt menu' }),
+    ).toHaveAttribute('type', 'button');
+  });
+
+  it('renders as a pill (rounded-full)', () => {
+    render(CkPromptMenuButton, {
+      props: { ariaLabel: 'Open prompt menu' },
+    });
+
+    expect(
+      screen.getByRole('button', { name: 'Open prompt menu' }).className,
+    ).toContain('!rounded-full');
+  });
+});

package/src/components/base/CkPromptMenuButton/CkPromptMenuButton.stories.ts

@@ -0,0 +1,75 @@
+import CkPromptMenuButton from './CkPromptMenuButton.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkPromptMenuButton> = {
+  title: 'Base/CkPromptMenuButton',
+  component: CkPromptMenuButton,
+  tags: ['autodocs'],
+  argTypes: {
+    ariaLabel: {
+      control: 'text',
+      description:
+        'Accessible label for the button. Required because the button is icon-only.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled.',
+    },
+    type: {
+      control: 'radio',
+      options: ['button', 'submit'],
+      description: 'Native button type. Use `submit` inside a <form>.',
+    },
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div style="max-width: 640px; margin: 0 auto; padding: 24px;"><story /></div>',
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkPromptMenuButton } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkPromptMenuButton aria-label="Open prompt menu" />
+</template>`;
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { CkPromptMenuButton } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkPromptMenuButton aria-label="Open prompt menu" disabled />
+</template>`;
+
+/**
+ * Default menu-trigger button — ghost variant with the built-in plus icon.
+ * Drop into a `CkPromptInput` left toolbar slot, wrap with `UiDropdownMenu`
+ * to expose the actual prompt actions (attach files, attach folders, toggle
+ * tools, etc.).
+ */
+export const Default: Story = {
+  render: () => ({
+    components: { CkPromptMenuButton },
+    template: `<CkPromptMenuButton aria-label="Open prompt menu" />`,
+  }),
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Disabled state — use while the menu's actions are unavailable (e.g. while
+ * the previous request is still in flight).
+ */
+export const Disabled: Story = {
+  render: () => ({
+    components: { CkPromptMenuButton },
+    template: `<CkPromptMenuButton aria-label="Open prompt menu" disabled />`,
+  }),
+  parameters: { docs: { source: { code: disabledTemplateSource } } },
+};

package/src/components/base/CkPromptMenuButton/CkPromptMenuButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { CkPromptMenuButtonProps } from './types';
+import { UiButton, UiIcon } from '@aleph-alpha/ui-library';
+
+defineOptions({ name: 'CkPromptMenuButton' });
+
+withDefaults(defineProps<CkPromptMenuButtonProps>(), {
+  disabled: false,
+  type: 'button',
+});
+</script>
+
+<template>
+  <UiButton
+    v-bind="{ ariaLabel }"
+    variant="ghost"
+    size="icon"
+    :type="type"
+    :disabled="disabled"
+    class="!rounded-full"
+  >
+    <slot>
+      <UiIcon name="plus" :size="20" />
+    </slot>
+  </UiButton>
+</template>

package/src/components/base/CkPromptMenuButton/index.ts

@@ -0,0 +1,2 @@
+export { default as CkPromptMenuButton } from './CkPromptMenuButton.vue';
+export type * from './types';

package/src/components/base/CkPromptMenuButton/types.ts

@@ -0,0 +1,29 @@
+/**
+ * Icon-only menu trigger styled for the chat prompt area (ghost variant,
+ * pill-shaped). Sits in `CkPromptInput`'s `toolbar-left` slot as the entry
+ * point to a dropdown of prompt actions — attach files, attach folders,
+ * toggle tools, switch length, etc. Defaults to a `plus` icon when the slot
+ * is empty; pass any icon to override.
+ *
+ * @category Actions
+ * @useCases open prompt menu, attach files, add resources, toggle tools, prompt input toolbar
+ * @keywords prompt, menu, plus, add, button, icon, ghost, dropdown trigger, tools
+ * @related CkPromptInput, CkPromptSendButton, CkPromptStopButton, CkDropZoneOverlay, CkFileItemsList
+ */
+export interface CkPromptMenuButtonProps {
+  /**
+   * Accessible label for the button. **Required** because the button only
+   * renders an icon.
+   */
+  ariaLabel: string;
+  /**
+   * Whether the button is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Native button `type`.
+   * @default 'button'
+   */
+  type?: 'button' | 'submit';
+}

package/src/components/base/{CkPromptActionButton/CkPromptActionButton.spec.ts → CkPromptSendButton/CkPromptSendButton.spec.ts}

@@ -1,9 +1,9 @@
-import CkPromptActionButton from './CkPromptActionButton.vue';
+import CkPromptSendButton from './CkPromptSendButton.vue';
 import { render, screen } from '@testing-library/vue';
 
-describe('CkPromptActionButton', () => {
+describe('CkPromptSendButton', () => {
   it('renders icon slot content', () => {
-    render(CkPromptActionButton, {
+    render(CkPromptSendButton, {
       props: { ariaLabel: 'Send' },
       slots: { default: '<svg data-testid="icon"></svg>' },
     });
@@ -12,7 +12,7 @@ describe('CkPromptActionButton', () => {
   });
 
   it('passes ariaLabel to the underlying button', () => {
-    render(CkPromptActionButton, {
+    render(CkPromptSendButton, {
       props: { ariaLabel: 'Send message' },
     });
 
@@ -22,7 +22,7 @@ describe('CkPromptActionButton', () => {
   });
 
   it('passes disabled state to the underlying button', () => {
-    render(CkPromptActionButton, {
+    render(CkPromptSendButton, {
       props: { ariaLabel: 'Send', disabled: true },
     });
 
@@ -30,7 +30,7 @@ describe('CkPromptActionButton', () => {
   });
 
   it('defaults type to button', () => {
-    render(CkPromptActionButton, {
+    render(CkPromptSendButton, {
       props: { ariaLabel: 'Send' },
     });
 
@@ -40,13 +40,13 @@ describe('CkPromptActionButton', () => {
     );
   });
 
-  it('applies brand styling classes', () => {
-    render(CkPromptActionButton, {
+  it('renders as a pill (rounded-full)', () => {
+    render(CkPromptSendButton, {
       props: { ariaLabel: 'Send' },
     });
 
-    const button = screen.getByRole('button', { name: 'Send' });
-    expect(button.className).toContain('!bg-brand-bg-brand');
-    expect(button.className).toContain('!rounded-md');
+    expect(screen.getByRole('button', { name: 'Send' }).className).toContain(
+      '!rounded-full',
+    );
   });
 });

package/src/components/base/CkPromptSendButton/CkPromptSendButton.stories.ts

@@ -0,0 +1,117 @@
+import CkPromptSendButton from './CkPromptSendButton.vue';
+import CkSendIcon from '../icons/CkSendIcon.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkPromptSendButton> = {
+  title: 'Base/CkPromptSendButton',
+  component: CkPromptSendButton,
+  tags: ['autodocs'],
+  argTypes: {
+    ariaLabel: {
+      control: 'text',
+      description:
+        'Accessible label for the button. Required because the button is icon-only.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled.',
+    },
+    loading: {
+      control: 'boolean',
+      description:
+        'Shows a spinner instead of the slotted icon and blocks clicks.',
+    },
+    type: {
+      control: 'radio',
+      options: ['button', 'submit'],
+      description: 'Native button type. Use `submit` inside a <form>.',
+    },
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div style="max-width: 640px; margin: 0 auto; padding: 24px;"><story /></div>',
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkPromptSendButton, CkSendIcon } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkPromptSendButton aria-label="Send message">
+    <CkSendIcon />
+  </CkPromptSendButton>
+</template>`;
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { CkPromptSendButton, CkSendIcon } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkPromptSendButton aria-label="Send message" disabled>
+    <CkSendIcon />
+  </CkPromptSendButton>
+</template>`;
+
+const loadingTemplateSource = `<script setup lang="ts">
+import { CkPromptSendButton, CkSendIcon } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkPromptSendButton aria-label="Send message" loading>
+    <CkSendIcon />
+  </CkPromptSendButton>
+</template>`;
+
+/**
+ * Default send button. Drop into a `CkPromptInput`'s `toolbar-right` slot to
+ * submit the prompt.
+ */
+export const Default: Story = {
+  render: () => ({
+    components: { CkPromptSendButton, CkSendIcon },
+    template: `
+      <CkPromptSendButton aria-label="Send message">
+        <CkSendIcon />
+      </CkPromptSendButton>
+    `,
+  }),
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Disabled state — use when the input is empty or a submit is otherwise
+ * blocked (e.g. rate-limited).
+ */
+export const Disabled: Story = {
+  render: () => ({
+    components: { CkPromptSendButton, CkSendIcon },
+    template: `
+      <CkPromptSendButton aria-label="Send message" disabled>
+        <CkSendIcon />
+      </CkPromptSendButton>
+    `,
+  }),
+  parameters: { docs: { source: { code: disabledTemplateSource } } },
+};
+
+/**
+ * Loading state — shows a spinner and blocks clicks. Use while the previous
+ * message is still streaming or the request is in flight.
+ */
+export const Loading: Story = {
+  render: () => ({
+    components: { CkPromptSendButton, CkSendIcon },
+    template: `
+      <CkPromptSendButton aria-label="Send message" loading>
+        <CkSendIcon />
+      </CkPromptSendButton>
+    `,
+  }),
+  parameters: { docs: { source: { code: loadingTemplateSource } } },
+};

package/src/components/base/{CkPromptActionButton/CkPromptActionButton.vue → CkPromptSendButton/CkPromptSendButton.vue}

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { CkPromptActionButtonProps } from './types';
+import type { CkPromptSendButtonProps } from './types';
 import { UiButton } from '@aleph-alpha/ui-library';
 
-defineOptions({ name: 'CkPromptActionButton' });
+defineOptions({ name: 'CkPromptSendButton' });
 
-withDefaults(defineProps<CkPromptActionButtonProps>(), {
+withDefaults(defineProps<CkPromptSendButtonProps>(), {
   disabled: false,
   loading: false,
   type: 'button',
@@ -18,7 +18,7 @@ withDefaults(defineProps<CkPromptActionButtonProps>(), {
     :type="type"
     :disabled="disabled"
     :loading="loading"
-    class="!bg-brand-bg-brand hover:!bg-brand-bg-brand-hover !text-brand-content-default !rounded-md"
+    class="!rounded-full"
   >
     <slot />
   </UiButton>

package/src/components/base/CkPromptSendButton/index.ts

@@ -0,0 +1,2 @@
+export { default as CkPromptSendButton } from './CkPromptSendButton.vue';
+export type * from './types';