@aleph-alpha/chat-kit 1.11.1 → 1.13.0

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

@@ -0,0 +1,177 @@
+import { defaultChatKitLabels } from '../../../handlers/useChatKitLabels';
+import CkFeedbackDialog from './CkFeedbackDialog.vue';
+import type {
+  CkFeedbackDialogProps,
+  CkFeedbackDialogSubmitPayload,
+  CkFeedbackReason,
+} from './types';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/vue';
+import { describe, expect, it } from 'vitest';
+
+const SUBMIT = defaultChatKitLabels.feedbackDialogSubmitLabel!;
+const CANCEL = defaultChatKitLabels.feedbackDialogCancelLabel!;
+const TITLE_POSITIVE = defaultChatKitLabels.feedbackDialogTitlePositive!;
+const TITLE_NEGATIVE = defaultChatKitLabels.feedbackDialogTitleNegative!;
+const RESPONSE_HEADING = defaultChatKitLabels.feedbackDialogResponseHeading!;
+const OTHER_LABEL = defaultChatKitLabels.feedbackDialogOtherLabel!;
+// UiDialogContent's default close-button accessible name.
+const CLOSE = 'Close dialog';
+
+const REASONS: CkFeedbackReason[] = [
+  { code: 'accurate_or_well_sourced', label: 'Accurate / well-sourced' },
+  { code: 'clear_explanation', label: 'Clear explanation' },
+  { code: 'good_tone', label: 'Good tone' },
+];
+
+function renderDialog(props: Partial<CkFeedbackDialogProps> = {}) {
+  return render(CkFeedbackDialog, {
+    props: {
+      open: true,
+      sentiment: 'positive',
+      reasons: REASONS,
+      responseText: 'A sample assistant response.',
+      ...props,
+    } as CkFeedbackDialogProps,
+  });
+}
+
+describe('CkFeedbackDialog', () => {
+  // AC (SPHER-4504): "After clicking thumbs up/down, a reason selector panel
+  // appears" rendering the labels fetched from the backend config.
+  it('renders the supplied reasons as toggle buttons (by label)', async () => {
+    renderDialog();
+
+    for (const reason of REASONS) {
+      expect(
+        await screen.findByRole('button', { name: reason.label }),
+      ).toBeInTheDocument();
+    }
+  });
+
+  // AC: title reflects the sentiment the dialog was opened for.
+  it('shows the positive title for positive sentiment', async () => {
+    renderDialog({ sentiment: 'positive' });
+    expect(await screen.findByText(TITLE_POSITIVE)).toBeInTheDocument();
+  });
+
+  it('shows the negative title for negative sentiment', async () => {
+    renderDialog({ sentiment: 'negative' });
+    expect(await screen.findByText(TITLE_NEGATIVE)).toBeInTheDocument();
+  });
+
+  // AC: "Submitting sends sentiment + reason + reason_text to the backend."
+  // The dialog emits the selected reason CODE (not the label) and the sentiment.
+  it('emits submit with the selected reason code and sentiment', async () => {
+    const user = userEvent.setup();
+    const { emitted } = renderDialog({ sentiment: 'negative' });
+
+    await user.click(
+      await screen.findByRole('button', { name: REASONS[0].label }),
+    );
+    await user.click(screen.getByRole('button', { name: SUBMIT }));
+
+    const submitEvents = emitted('submit') as [CkFeedbackDialogSubmitPayload][];
+    expect(submitEvents).toHaveLength(1);
+    expect(submitEvents[0][0]).toEqual({
+      sentiment: 'negative',
+      reason: REASONS[0].code,
+      reasonText: '',
+    });
+  });
+
+  // Single-select: choosing a second reason replaces the first (only one code
+  // is ever submitted).
+  it('keeps only one reason selected (single-select)', async () => {
+    const user = userEvent.setup();
+    const { emitted } = renderDialog();
+
+    await user.click(
+      await screen.findByRole('button', { name: REASONS[0].label }),
+    );
+    await user.click(screen.getByRole('button', { name: REASONS[1].label }));
+    await user.click(screen.getByRole('button', { name: SUBMIT }));
+
+    const submitEvents = emitted('submit') as [CkFeedbackDialogSubmitPayload][];
+    expect(submitEvents[0][0].reason).toBe(REASONS[1].code);
+  });
+
+  // Submit is gated until the user provides at least one signal (a reason or
+  // some free text), so we never POST an empty qualitative payload.
+  it('disables submit until a reason or free text is provided', async () => {
+    const user = userEvent.setup();
+    renderDialog();
+
+    const submit = await screen.findByRole('button', { name: SUBMIT });
+    expect(submit).toBeDisabled();
+
+    await user.click(screen.getByRole('button', { name: REASONS[1].label }));
+    await waitFor(() => expect(submit).not.toBeDisabled());
+  });
+
+  // Free text alone (no reason) is a valid submission; reason is null.
+  it('allows submitting with only free text', async () => {
+    const user = userEvent.setup();
+    const { emitted } = renderDialog();
+
+    await user.type(await screen.findByRole('textbox'), 'Needs more detail');
+    await user.click(screen.getByRole('button', { name: SUBMIT }));
+
+    const submitEvents = emitted('submit') as [CkFeedbackDialogSubmitPayload][];
+    expect(submitEvents).toHaveLength(1);
+    expect(submitEvents[0][0]).toMatchObject({
+      reason: null,
+      reasonText: 'Needs more detail',
+    });
+  });
+
+  // AC: "After clicking Cancel ... the user can click again" — cancel emits
+  // both `cancel` and `update:open(false)` without a `submit`.
+  it('emits cancel and closes without submitting', async () => {
+    const user = userEvent.setup();
+    const { emitted } = renderDialog();
+
+    await user.click(await screen.findByRole('button', { name: CANCEL }));
+
+    expect(emitted('cancel')).toHaveLength(1);
+    expect(emitted('update:open')).toContainEqual([false]);
+    expect(emitted('submit')).toBeUndefined();
+  });
+
+  // While submitting, both actions are frozen so the user can't double-submit
+  // or cancel mid-flight.
+  it('disables both actions while submitting', async () => {
+    renderDialog({ submitting: true });
+
+    expect(await screen.findByRole('button', { name: SUBMIT })).toBeDisabled();
+    expect(screen.getByRole('button', { name: CANCEL })).toBeDisabled();
+  });
+
+  // The free-text field must be programmatically associated with its label so
+  // screen readers announce it (label `for` ↔ textarea `id`).
+  it('associates the free-text input with the "Other" label', async () => {
+    renderDialog();
+    expect(
+      await screen.findByRole('textbox', { name: OTHER_LABEL }),
+    ).toBeInTheDocument();
+  });
+
+  // The close (X) button is hidden while submitting so there's no enabled
+  // control that does nothing; the non-interactive state stays consistent.
+  it('hides the close button while submitting', async () => {
+    renderDialog({ submitting: true });
+
+    await screen.findByRole('button', { name: SUBMIT });
+    expect(
+      screen.queryByRole('button', { name: CLOSE }),
+    ).not.toBeInTheDocument();
+  });
+
+  // When no response text is given the left preview column is omitted.
+  it('omits the response heading when responseText is empty', async () => {
+    renderDialog({ responseText: '' });
+
+    await screen.findByRole('button', { name: SUBMIT });
+    expect(screen.queryByText(RESPONSE_HEADING)).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,258 @@
+import CkFeedbackDialog from './CkFeedbackDialog.vue';
+import { CkFeedbackButton } from '../CkFeedbackButton';
+import type {
+  CkFeedbackDialogSubmitPayload,
+  CkFeedbackReason,
+  CkFeedbackSentiment,
+} from './types';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { CkFeedbackValue } from '../CkFeedbackButton';
+import { ref } from 'vue';
+
+// Reason catalogs mirror what the backend serves from `GET /feedback/config`
+// (feedback-kit). In the real app the host fetches these; here they are inlined
+// for the story. `code` is submitted; `label` is shown.
+const POSITIVE_REASONS: CkFeedbackReason[] = [
+  { code: 'accurate_or_well_sourced', label: 'Accurate / well-sourced' },
+  { code: 'followed_instructions', label: 'Followed instructions' },
+  { code: 'right_level_of_detail', label: 'Right level of detail' },
+  { code: 'clear_explanation', label: 'Clear explanation' },
+  { code: 'good_tone', label: 'Good tone' },
+  { code: 'creative_or_insightful', label: 'Creative / insightful' },
+  { code: 'honest_about_uncertainty', label: 'Honest about uncertainty' },
+  { code: 'handled_hard_request', label: 'Handled hard request' },
+];
+
+const NEGATIVE_REASONS: CkFeedbackReason[] = [
+  { code: 'factually_incorrect', label: 'Factually incorrect' },
+  { code: 'off_topic_or_irrelevant', label: 'Off-topic / irrelevant' },
+  { code: 'incomplete', label: 'Incomplete' },
+  { code: 'too_long_or_repetitive', label: 'Too long / repetitive' },
+  { code: 'didnt_follow_instructions', label: 'Didn’t follow instructions' },
+  { code: 'biased_or_unsafe', label: 'Biased or unsafe' },
+  { code: 'refused_unnecessarily', label: 'Refused unnecessarily' },
+  { code: 'bad_formatting', label: 'Bad formatting' },
+  { code: 'wrong_tone', label: 'Wrong tone' },
+  { code: 'wrong_language', label: 'Wrong language' },
+];
+
+const SAMPLE_RESPONSE = `Based on a review of internal documents, here are the key lessons learned and best practices from the 'Digital Transformation Phase 1' project, broken down by category:
+
+Key Lessons Learned:
+
+- **Stakeholder Involvement:** The most critical lesson was the need for early and **continuous stakeholder involvement** from all affected departments. A lack of initial engagement led to significant user resistance and process rework in the initial rollout.
+- **User Training:** Tailored, hands-on training was found to be far more effective than generic sessions. Departments that received customized training saw a **25% higher adoption rate** of the new tools compared to those with generic training.`;
+
+const meta: Meta<typeof CkFeedbackDialog> = {
+  title: 'Base/CkFeedbackDialog',
+  component: CkFeedbackDialog,
+  tags: ['autodocs'],
+  argTypes: {
+    open: { control: 'boolean' },
+    sentiment: {
+      control: 'select',
+      options: ['positive', 'negative'] satisfies CkFeedbackSentiment[],
+    },
+    responseText: { control: 'text' },
+    reasons: { control: 'object' },
+    maxFreeTextLength: { control: 'number' },
+    submitting: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const integrationTemplate = `<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  CkFeedbackButton,
+  CkFeedbackDialog,
+} from '@aleph-alpha/chat-kit';
+import type {
+  CkFeedbackDialogSubmitPayload,
+  CkFeedbackReason,
+  CkFeedbackSentiment,
+  CkFeedbackValue,
+} from '@aleph-alpha/chat-kit';
+
+const value = ref<CkFeedbackValue>(null);
+const locked = ref(false);
+const open = ref(false);
+const sentiment = ref<CkFeedbackSentiment>('positive');
+const submitting = ref(false);
+
+// reasons come from GET /feedback/config (fetched + cached by the host)
+const positiveReasons = ref<CkFeedbackReason[]>([]);
+const negativeReasons = ref<CkFeedbackReason[]>([]);
+
+function onUpdate(next: CkFeedbackValue) {
+  // Open the dialog on a thumb click but DO NOT lock yet — we lock only once
+  // the user submits the dialog form.
+  value.value = next;
+  if (next === 'up') {
+    sentiment.value = 'positive';
+    open.value = true;
+  } else if (next === 'down') {
+    sentiment.value = 'negative';
+    open.value = true;
+  }
+}
+
+async function onSubmit(payload: CkFeedbackDialogSubmitPayload) {
+  submitting.value = true;
+  try {
+    // Host POSTs to /feedback/ { response_id, sentiment, reason, reason_text }.
+    await new Promise((r) => setTimeout(r, 400));
+    locked.value = true;
+    open.value = false;
+  } finally {
+    submitting.value = false;
+  }
+}
+
+function onCancel() {
+  value.value = null;
+}
+</script>
+
+<template>
+  <CkFeedbackButton :value="value" :locked="locked" @update:value="onUpdate" />
+  <CkFeedbackDialog
+    v-model:open="open"
+    :sentiment="sentiment"
+    :reasons="sentiment === 'positive' ? positiveReasons : negativeReasons"
+    :response-text="responseText"
+    :submitting="submitting"
+    @submit="onSubmit"
+    @cancel="onCancel"
+  />
+</template>`;
+
+/**
+ * Positive variant. Single-select reason chips on the right, the response on
+ * the left, optional free text underneath.
+ */
+export const Positive: Story = {
+  args: {
+    open: true,
+    sentiment: 'positive',
+    reasons: POSITIVE_REASONS,
+    responseText: SAMPLE_RESPONSE,
+  },
+};
+
+/**
+ * Negative variant. Same shape, different reason set and title.
+ */
+export const Negative: Story = {
+  args: {
+    open: true,
+    sentiment: 'negative',
+    reasons: NEGATIVE_REASONS,
+    responseText: SAMPLE_RESPONSE,
+  },
+};
+
+/**
+ * When no response text is provided, the left column collapses and the reasons
+ * + free-text input fill the dialog.
+ */
+export const NoResponseColumn: Story = {
+  args: {
+    open: true,
+    sentiment: 'negative',
+    reasons: NEGATIVE_REASONS,
+    responseText: '',
+  },
+};
+
+/**
+ * Submit shows a busy state while the host persists the payload; both actions
+ * are non-interactive.
+ */
+export const Submitting: Story = {
+  args: {
+    open: true,
+    sentiment: 'positive',
+    reasons: POSITIVE_REASONS,
+    responseText: SAMPLE_RESPONSE,
+    submitting: true,
+  },
+};
+
+/**
+ * Realistic end-to-end flow wired to `CkFeedbackButton`. Click a thumb to open
+ * the dialog; submit or cancel; the button locks only on submit.
+ */
+export const WithFeedbackButton: Story = {
+  render: () => ({
+    components: { CkFeedbackButton, CkFeedbackDialog },
+    setup() {
+      const value = ref<CkFeedbackValue>(null);
+      const locked = ref(false);
+      const open = ref(false);
+      const sentiment = ref<CkFeedbackSentiment>('positive');
+      const submitting = ref(false);
+
+      function onUpdate(next: CkFeedbackValue) {
+        value.value = next;
+        if (next === 'up') {
+          sentiment.value = 'positive';
+          open.value = true;
+        } else if (next === 'down') {
+          sentiment.value = 'negative';
+          open.value = true;
+        }
+      }
+
+      async function onSubmit(payload: CkFeedbackDialogSubmitPayload) {
+        submitting.value = true;
+        await new Promise((r) => setTimeout(r, 400));
+        // eslint-disable-next-line no-console
+        console.info('CkFeedbackDialog submit', payload);
+        submitting.value = false;
+        locked.value = true;
+        open.value = false;
+      }
+
+      function onCancel() {
+        value.value = null;
+      }
+
+      return {
+        value,
+        locked,
+        open,
+        sentiment,
+        submitting,
+        positiveReasons: POSITIVE_REASONS,
+        negativeReasons: NEGATIVE_REASONS,
+        responseText: SAMPLE_RESPONSE,
+        onUpdate,
+        onSubmit,
+        onCancel,
+      };
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <CkFeedbackButton
+          :value="value"
+          :locked="locked"
+          @update:value="onUpdate"
+        />
+        <CkFeedbackDialog
+          v-model:open="open"
+          :sentiment="sentiment"
+          :reasons="sentiment === 'positive' ? positiveReasons : negativeReasons"
+          :response-text="responseText"
+          :submitting="submitting"
+          @submit="onSubmit"
+          @cancel="onCancel"
+        />
+      </div>
+    `,
+  }),
+  parameters: { docs: { source: { code: integrationTemplate } } },
+};