@aleph-alpha/chat-kit 5.1.0 → 5.3.0

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

@@ -160,11 +160,11 @@ defineExpose({ focus, submit });
   <div class="ck-prompt-root flex flex-col gap-2">
     <form
       :class="[
-        'border-border-surface-default bg-background-input-strong  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)] ',
+        'ck-prompt-form border-border-surface-default bg-background-input-strong grid items-center gap-x-0 gap-y-5 border transition-[border-radius] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] ',
         hasMultipleRows ? 'rounded-2xl' : 'rounded-3xl',
         isKeyboardFocused
           ? 'border-border-surface-focus-ring ring-border-surface-focus-ring/40 ring-2'
-          : 'ck-prompt-form',
+          : 'ck-prompt-shadow',
       ]"
       :style="{
         gridTemplateColumns: 'auto 1fr auto',
@@ -222,14 +222,18 @@ defineExpose({ focus, submit });
   container-type: inline-size;
 }
 
-/* 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 {
   /* 8px (mobile) → 16px (desktop) */
   padding: clamp(8px, calc(8px + (100cqw - 320px) * 8 / 448), 16px);
   /* 52px → 68px (= 36px button + 2× padding) */
   min-height: clamp(52px, calc(52px + (100cqw - 320px) * 16 / 448), 68px);
+}
+
+/* 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. Applied
+   only when the field is not keyboard-focused; the focus ring replaces it. */
+.ck-prompt-shadow {
   box-shadow:
     0 4px 6px -2px rgba(112, 95, 90, 0.1),
     0 6px 14px -2px rgba(248, 94, 43, 0.05);

package/src/components/base/CkUserMessage/CkUserMessage.vue

@@ -1,17 +1,7 @@
 <script setup lang="ts">
-import {
-  defaultChatKitLabels,
-  useChatKitLabels,
-} from '../../../handlers/useChatKitLabels';
+import { useChatKitLabels } from '../../../handlers/useChatKitLabels';
 import type { CkUserMessageProps } from './types';
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 
 defineOptions({ name: 'CkUserMessage' });
 
@@ -22,17 +12,8 @@ const props = withDefaults(defineProps<CkUserMessageProps>(), {
 
 const labels = useChatKitLabels();
 
-// Resolution order: injected label, English default.
-const showMoreLabel = computed(
-  () =>
-    labels.value.userMessageShowMore ??
-    defaultChatKitLabels.userMessageShowMore!,
-);
-const showLessLabel = computed(
-  () =>
-    labels.value.userMessageShowLess ??
-    defaultChatKitLabels.userMessageShowLess!,
-);
+const showMoreLabel = computed(() => labels.value.userMessageShowMore);
+const showLessLabel = computed(() => labels.value.userMessageShowLess);
 
 /** Clamping is opt-in: only active when a positive `collapsedLines` is given. */
 const clampEnabled = computed(() => (props.collapsedLines ?? 0) > 0);
@@ -53,13 +34,21 @@ function toggle() {
 
 let resizeObserver: ResizeObserver | undefined;
 
-onMounted(() => {
-  nextTick(measure);
-  if (typeof ResizeObserver !== 'undefined') {
-    resizeObserver = new ResizeObserver(() => measure());
-    if (contentRef.value) resizeObserver.observe(contentRef.value);
-  }
-});
+function observeContent(el: HTMLElement | null) {
+  if (typeof ResizeObserver === 'undefined') return;
+  if (!resizeObserver) resizeObserver = new ResizeObserver(() => measure());
+  resizeObserver.disconnect();
+  if (el) resizeObserver.observe(el);
+}
+
+watch(
+  contentRef,
+  (el) => {
+    observeContent(el);
+    nextTick(measure);
+  },
+  { flush: 'post' },
+);
 
 onBeforeUnmount(() => resizeObserver?.disconnect());
 

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

@@ -4,10 +4,13 @@
  * default slot for custom inline content. When `collapsedLines` is set, long
  * messages are clamped with a fade and a "Show more" / "Show less" toggle.
  *
+ * For an editable variant (hover/focus edit toolbar), see
+ * {@link CkEditableUserMessage}, which wraps this component.
+ *
  * @category Messages
  * @useCases render user message, conversation turn from user, chat input preview, right-aligned message, collapsible long message
  * @keywords user, message, chat, conversation, turn, collapse, show more
- * @related CkAgentMessage, CkConversation
+ * @related CkEditableUserMessage, CkAgentMessage, CkConversation
  */
 export interface CkUserMessageProps {
   /** Text content of the user message. Rendered inside the bubble when no default slot is provided. */

package/src/components/base/index.ts

@@ -73,3 +73,8 @@ export { CkPromptInputDisclaimer } from './CkPromptInputDisclaimer';
 export { CkRegenerateMessageButton } from './CkRegenerateMessageButton';
 export { CkUserMessage } from './CkUserMessage';
 export type { CkUserMessageProps } from './CkUserMessage';
+export { CkEditableUserMessage } from './CkEditableUserMessage';
+export type {
+  CkEditableUserMessageEmits,
+  CkEditableUserMessageProps,
+} from './CkEditableUserMessage';

package/src/components/composed/CkConversation/CkConversation.stories.ts

@@ -116,6 +116,34 @@ const sampleMessages: BaseMessage[] = [
   },
 ];
 
+/**
+ * A conversation whose final assistant turn is still being generated. The
+ * message `status` of `'sending'` (or `'started'`) drives the loading icon —
+ * a spinner by default, or `agentLoadingImage` when provided.
+ */
+const loadingMessages: BaseMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: [
+      text(
+        "Find the lessons learned from the 'Digital Transformation Phase 1' project.",
+      ),
+    ],
+    createdAt: now,
+    status: 'completed',
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    content: [
+      { type: 'text', id: 'a-loading', text: '', status: 'in_progress' },
+    ],
+    createdAt: now,
+    status: 'sending',
+  },
+];
+
 const meta: Meta<typeof CkConversation> = {
   title: 'Composed/CkConversation',
   component: CkConversation,
@@ -248,6 +276,33 @@ const messages: BaseMessage[] = [/* ... */];
   </CkConversation>
 </template>`;
 
+const withLoadingIconTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: [{ type: 'text', id: 't1', text: 'Find the lessons learned.', status: 'completed' }],
+    createdAt: new Date(),
+    status: 'completed',
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    // A 'sending' / 'started' status renders the loading icon (spinner by default).
+    content: [{ type: 'text', id: 't2', text: '', status: 'in_progress' }],
+    createdAt: new Date(),
+    status: 'sending',
+  },
+];
+</script>
+
+<template>
+  <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;" />
+</template>`;
+
 const withFooterActionsTemplateSource = `<script setup lang="ts">
 import { ref } from 'vue';
 import {
@@ -522,6 +577,23 @@ export const WithCustomIcon: Story = {
   parameters: { docs: { source: { code: withCustomIconTemplateSource } } },
 };
 
+/**
+ * A conversation with an in-flight assistant reply. The final message's
+ * `status: 'sending'` swaps its avatar for the loading icon (a spinner by
+ * default; set `agent-loading-image` to show a custom loading avatar instead).
+ */
+export const WithLoadingIcon: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return { messages: loadingMessages };
+    },
+    template:
+      '<CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;" />',
+  }),
+  parameters: { docs: { source: { code: withLoadingIconTemplateSource } } },
+};
+
 /**
  * Overrides `#agent-message-footer` to add real action buttons next to each
  * assistant reply: `CkCopyMessageButton` for clipboard copy and

package/src/components/index.ts

@@ -25,6 +25,7 @@ export {
   CkSendIcon,
   CkStopIcon,
   CkUserMessage,
+  CkEditableUserMessage,
 } from './base';
 export type {
   CkAgentMessageHeaderProps,
@@ -61,6 +62,8 @@ export type {
   CkModelSelectorEmits,
   CkPromptMenuButtonProps,
   CkUserMessageProps,
+  CkEditableUserMessageProps,
+  CkEditableUserMessageEmits,
 } from './base';
 
 // Composed (pattern) components

package/src/handlers/useChatKitLabels.ts

@@ -71,6 +71,10 @@ export type ChatKitLabels = {
   userMessageShowMore?: string;
   /** Label for the `CkUserMessage` toggle when the message is expanded. */
   userMessageShowLess?: string;
+  /** Accessible label for the `CkEditableUserMessage` floating actions toolbar. */
+  userMessageActions?: string;
+  /** Accessible label / tooltip for the edit action in the `CkEditableUserMessage` toolbar. */
+  userMessageEditAction?: string;
   /** Accessible label for the `CkModelSelector` trigger button. */
   modelSelectorAriaLabel?: string;
   /** Accessible label for the `CkModelSelector` options list. */
@@ -133,6 +137,8 @@ export const defaultChatKitLabels: ChatKitLabels = {
   feedbackDialogSubmitLabel: 'Submit',
   userMessageShowMore: 'Show more',
   userMessageShowLess: 'Show less',
+  userMessageActions: 'Message actions',
+  userMessageEditAction: 'Edit message',
   modelSelectorAriaLabel: 'Select model',
   modelSelectorListAriaLabel: 'Models',
   modelSelectorPlaceholder: 'Select model',

package/src/index.ts

@@ -89,6 +89,7 @@ export {
   CkSendIcon,
   CkStopIcon,
   CkUserMessage,
+  CkEditableUserMessage,
 } from './components';
 export type {
   CkAgentMessageHeaderProps,
@@ -128,6 +129,8 @@ export type {
   CkModelSelectorEmits,
   CkPromptMenuButtonProps,
   CkUserMessageProps,
+  CkEditableUserMessageProps,
+  CkEditableUserMessageEmits,
 } from './components';
 
 // Helpers