@aleph-alpha/chat-kit 1.2.0 → 1.3.0

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

@@ -1,3 +1,6 @@
+import { CkCopyMessageActionButton } from '../../base/CkCopyMessageActionButton';
+import { CkFeedbackButton } from '../../base/CkFeedbackButton';
+import type { CkFeedbackValue } from '../../base/CkFeedbackButton';
 import type { BaseMessage } from '../../../types';
 import CkConversation from './CkConversation.vue';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
@@ -169,19 +172,32 @@ const messages: BaseMessage[] = [/* ... */];
 </template>`;
 
 const withFooterActionsTemplateSource = `<script setup lang="ts">
-import { CkConversation } from '@aleph-alpha/chat-kit';
-import type { BaseMessage } from '@aleph-alpha/chat-kit';
+import { ref } from 'vue';
+import {
+  CkConversation,
+  CkCopyMessageActionButton,
+  CkFeedbackButton,
+} from '@aleph-alpha/chat-kit';
+import type { BaseMessage, CkFeedbackValue } from '@aleph-alpha/chat-kit';
 
 const messages: BaseMessage[] = [/* ... */];
+
+// In a real app, key feedback by message id and persist to your backend.
+const feedback = ref<Record<string, { value: CkFeedbackValue; locked: boolean }>>({});
+function onFeedback(messageId: string, value: CkFeedbackValue) {
+  feedback.value[messageId] = { value, locked: value !== null };
+}
 </script>
 
 <template>
   <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
-    <template #agent-message-footer>
-      <button>Copy</button>
-      <button>Regenerate</button>
-      <button>Like</button>
-      <button>Dislike</button>
+    <template #agent-message-footer="{ message }">
+      <CkCopyMessageActionButton :text="message.content" />
+      <CkFeedbackButton
+        :value="feedback[message.id]?.value ?? null"
+        :locked="feedback[message.id]?.locked ?? false"
+        @update:value="(v) => onFeedback(message.id, v)"
+      />
     </template>
   </CkConversation>
 </template>`;
@@ -384,23 +400,36 @@ export const WithCustomIcon: Story = {
 };
 
 /**
- * Overrides `#agent-message-footer` to add custom action buttons (copy,
- * regenerate, thumbs up/down) next to each assistant reply. Use to add
- * feedback or follow-up actions.
+ * Overrides `#agent-message-footer` to add real action buttons next to each
+ * assistant reply: `CkCopyMessageActionButton` for clipboard copy and
+ * `CkFeedbackButton` for binary thumbs up / thumbs down feedback. The
+ * feedback state is owned by the host and locked once submitted.
  */
 export const WithFooterActions: Story = {
   render: () => ({
-    components: { CkConversation },
+    components: {
+      CkConversation,
+      CkCopyMessageActionButton,
+      CkFeedbackButton,
+    },
     setup() {
-      return { messages: sampleMessages };
+      const feedback = ref<
+        Record<string, { value: CkFeedbackValue; locked: boolean }>
+      >({});
+      function onFeedback(messageId: string, value: CkFeedbackValue) {
+        feedback.value[messageId] = { value, locked: value !== null };
+      }
+      return { messages: sampleMessages, feedback, onFeedback };
     },
     template: `
       <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
-        <template #agent-message-footer>
-          <button class="p-1 opacity-60 hover:opacity-100">📋</button>
-          <button class="p-1 opacity-60 hover:opacity-100">🔄</button>
-          <button class="p-1 opacity-60 hover:opacity-100">👍</button>
-          <button class="p-1 opacity-60 hover:opacity-100">👎</button>
+        <template #agent-message-footer="{ message }">
+          <CkCopyMessageActionButton :text="message.content" />
+          <CkFeedbackButton
+            :value="feedback[message.id]?.value ?? null"
+            :locked="feedback[message.id]?.locked ?? false"
+            @update:value="(v) => onFeedback(message.id, v)"
+          />
         </template>
       </CkConversation>
     `,

package/src/components/index.ts

@@ -3,6 +3,7 @@ export {
   CkAgentMessage,
   CkConversationLayout,
   CkCopyMessageActionButton,
+  CkFeedbackButton,
   CkHistoryItem,
   CkHistoryWrapper,
   CkMarkdownRenderer,
@@ -17,6 +18,8 @@ export {
 } from './base';
 export type {
   CkConversationLayoutProps,
+  CkFeedbackButtonProps,
+  CkFeedbackValue,
   CkHistoryItemEmits,
   CkHistoryItemProps,
   CkHistoryWrapperProps,

package/src/handlers/useChatKitLabels.spec.ts

@@ -40,6 +40,9 @@ describe('useChatKitLabels', () => {
       inputPlaceholder: 'Nachricht eingeben...',
       copyMessageAction: 'Nachricht kopieren',
       copyMessageActionCopied: 'Kopiert',
+      feedbackThumbsUp: 'Gute Antwort',
+      feedbackThumbsDown: 'Schlechte Antwort',
+      feedbackGroup: 'Antwort bewerten',
       historyItemUntitled: 'Unbenannte Konversation',
       historyItemActionAriaLabel: 'Konversationsoptionen',
       historyItemEditAction: 'Bearbeiten',
@@ -108,6 +111,9 @@ describe('useChatKitLabels', () => {
       inputPlaceholder: 'Custom placeholder',
       copyMessageAction: 'Custom copy',
       copyMessageActionCopied: 'Custom copied',
+      feedbackThumbsUp: 'Custom up',
+      feedbackThumbsDown: 'Custom down',
+      feedbackGroup: 'Custom group',
       historyItemUntitled: 'Custom untitled',
       historyItemActionAriaLabel: 'Custom options',
       historyItemEditAction: 'Custom edit',
@@ -236,55 +242,69 @@ describe('useChatKitLabels', () => {
   });
 });
 
-describe('CkConversation uses injected labels', () => {
-  it('uses default agentAvatarAlt when no labels are provided', async () => {
-    const { default: CkConversation } =
-      await import('../components/composed/CkConversation/CkConversation.vue');
-
-    render(CkConversation, {
-      props: {
-        messages: [
-          {
-            id: '1',
-            role: 'assistant',
-            content: 'Hi',
-            createdAt: new Date(),
-            status: 'completed',
-          },
-        ],
-        agentAvatarImage: 'bot.png',
-      },
-    });
+// These two tests dynamically import CkConversation, which transitively pulls
+// in the markdown renderer + ui-library tree. First-time module load + jsdom
+// render can take ~5s under suite-wide load (vitest's default `testTimeout`),
+// so we bump the per-test timeout to keep them stable on slower CI runners.
+const CK_CONVERSATION_RENDER_TIMEOUT_MS = 15_000;
 
-    expect(screen.getByAltText('Agent avatar')).toBeInTheDocument();
-  });
-
-  it('uses injected agentAvatarAlt from provideChatKitLabels', async () => {
-    const { default: CkConversation } =
-      await import('../components/composed/CkConversation/CkConversation.vue');
-
-    const Wrapper = defineComponent({
-      setup() {
-        provideChatKitLabels(() => ({ agentAvatarAlt: 'Bot-Bild' }));
-        return () =>
-          h(CkConversation, {
-            messages: [
-              {
-                id: '1',
-                role: 'assistant',
-                content: 'Hi',
-                createdAt: new Date(),
-                status: 'completed',
-              },
-            ],
-            agentAvatarImage: 'bot.png',
-          });
-      },
-    });
-
-    render(Wrapper);
-
-    expect(screen.getByAltText('Bot-Bild')).toBeInTheDocument();
-    expect(screen.queryByAltText('Agent avatar')).not.toBeInTheDocument();
-  });
+describe('CkConversation uses injected labels', () => {
+  it(
+    'uses default agentAvatarAlt when no labels are provided',
+    async () => {
+      const { default: CkConversation } =
+        await import('../components/composed/CkConversation/CkConversation.vue');
+
+      render(CkConversation, {
+        props: {
+          messages: [
+            {
+              id: '1',
+              role: 'assistant',
+              content: 'Hi',
+              createdAt: new Date(),
+              status: 'completed',
+            },
+          ],
+          agentAvatarImage: 'bot.png',
+        },
+      });
+
+      expect(screen.getByAltText('Agent avatar')).toBeInTheDocument();
+    },
+    CK_CONVERSATION_RENDER_TIMEOUT_MS,
+  );
+
+  it(
+    'uses injected agentAvatarAlt from provideChatKitLabels',
+    async () => {
+      const { default: CkConversation } =
+        await import('../components/composed/CkConversation/CkConversation.vue');
+
+      const Wrapper = defineComponent({
+        setup() {
+          provideChatKitLabels(() => ({ agentAvatarAlt: 'Bot-Bild' }));
+          return () =>
+            h(CkConversation, {
+              messages: [
+                {
+                  id: '1',
+                  role: 'assistant',
+                  content: 'Hi',
+                  createdAt: new Date(),
+                  status: 'completed',
+                },
+              ],
+              agentAvatarImage: 'bot.png',
+            });
+        },
+      });
+
+      render(Wrapper);
+
+      expect(screen.getByAltText('Bot-Bild')).toBeInTheDocument();
+      expect(screen.queryByAltText('Agent avatar')).not.toBeInTheDocument();
+    },
+    CK_CONVERSATION_RENDER_TIMEOUT_MS,
+  );
 });

package/src/handlers/useChatKitLabels.ts

@@ -29,6 +29,24 @@ export type ChatKitLabels = {
   copyMessageAction: string;
   /** Accessible label / tooltip for the copy-message action button after a successful copy */
   copyMessageActionCopied: string;
+  /**
+   * Accessible label / tooltip for the thumbs-up button in `CkFeedbackButton`.
+   * Optional for backward compatibility; falls back to
+   * `defaultChatKitLabels.feedbackThumbsUp` when omitted.
+   */
+  feedbackThumbsUp?: string;
+  /**
+   * Accessible label / tooltip for the thumbs-down button in `CkFeedbackButton`.
+   * Optional for backward compatibility; falls back to
+   * `defaultChatKitLabels.feedbackThumbsDown` when omitted.
+   */
+  feedbackThumbsDown?: string;
+  /**
+   * Accessible group label announced when focus enters `CkFeedbackButton`.
+   * Optional for backward compatibility; falls back to
+   * `defaultChatKitLabels.feedbackGroup` when omitted.
+   */
+  feedbackGroup?: string;
   /** Fallback title used by `CkHistory` when a conversation has no `title`. */
   historyItemUntitled: string;
   /** Accessible name for the trailing kebab trigger on each `CkHistory` row. */
@@ -46,6 +64,9 @@ export const defaultChatKitLabels: ChatKitLabels = {
   inputPlaceholder: 'Type a message...',
   copyMessageAction: 'Copy response',
   copyMessageActionCopied: 'Copied!',
+  feedbackThumbsUp: 'Good response',
+  feedbackThumbsDown: 'Bad response',
+  feedbackGroup: 'Rate this response',
   historyItemUntitled: 'Untitled conversation',
   historyItemActionAriaLabel: 'Conversation options',
   historyItemEditAction: 'Edit',

package/src/index.ts

@@ -48,6 +48,7 @@ export {
   CkConversation,
   CkConversationLayout,
   CkCopyMessageActionButton,
+  CkFeedbackButton,
   CkHistory,
   CkHistoryItem,
   CkHistoryWrapper,
@@ -65,6 +66,8 @@ export {
 export type {
   CkConversationLayoutProps,
   CkConversationProps,
+  CkFeedbackButtonProps,
+  CkFeedbackValue,
   CkHistoryEmits,
   CkHistoryItemEmits,
   CkHistoryItemProps,