@aleph-alpha/chat-kit 1.11.1 → 1.13.0

package/src/components/base/CkFeedbackDialog/CkFeedbackDialog.vue

@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import {
+  defaultChatKitLabels,
+  useChatKitLabels,
+} from '../../../handlers/useChatKitLabels';
+import { CkMarkdownRenderer } from '../CkMarkdownRenderer';
+import type {
+  CkFeedbackDialogProps,
+  CkFeedbackDialogSubmitPayload,
+} from './types';
+import {
+  UiButton,
+  UiDialog,
+  UiDialogContent,
+  UiDialogDescription,
+  UiField,
+  UiFieldLabel,
+  UiTextarea,
+  UiToggleGroup,
+  UiToggleGroupItem,
+} from '@aleph-alpha/ui-library';
+import { computed, ref, useId, watch } from 'vue';
+
+defineOptions({
+  name: 'CkFeedbackDialog',
+});
+
+const {
+  open = false,
+  sentiment,
+  responseText = '',
+  reasons,
+  maxFreeTextLength = 250,
+  submitting = false,
+  disabled = false,
+  titlePositive,
+  titleNegative,
+  responseHeading: responseHeadingProp,
+  description: descriptionProp,
+  otherLabel: otherLabelProp,
+  otherTooltip: otherTooltipProp,
+  freeTextPlaceholder: freeTextPlaceholderProp,
+  cancelLabel: cancelLabelProp,
+  submitLabel: submitLabelProp,
+} = defineProps<CkFeedbackDialogProps>();
+
+const emit = defineEmits<{
+  'update:open': [open: boolean];
+  submit: [payload: CkFeedbackDialogSubmitPayload];
+  cancel: [];
+}>();
+
+const labels = useChatKitLabels();
+
+const title = computed(() => {
+  if (sentiment === 'positive') {
+    return (
+      titlePositive ??
+      labels.value.feedbackDialogTitlePositive ??
+      defaultChatKitLabels.feedbackDialogTitlePositive!
+    );
+  }
+  return (
+    titleNegative ??
+    labels.value.feedbackDialogTitleNegative ??
+    defaultChatKitLabels.feedbackDialogTitleNegative!
+  );
+});
+const responseHeading = computed(
+  () =>
+    responseHeadingProp ??
+    labels.value.feedbackDialogResponseHeading ??
+    defaultChatKitLabels.feedbackDialogResponseHeading!,
+);
+const description = computed(
+  () =>
+    descriptionProp ??
+    labels.value.feedbackDialogDescription ??
+    defaultChatKitLabels.feedbackDialogDescription!,
+);
+const otherLabel = computed(
+  () =>
+    otherLabelProp ??
+    labels.value.feedbackDialogOtherLabel ??
+    defaultChatKitLabels.feedbackDialogOtherLabel!,
+);
+const otherTooltip = computed(
+  () =>
+    otherTooltipProp ??
+    labels.value.feedbackDialogOtherTooltip ??
+    defaultChatKitLabels.feedbackDialogOtherTooltip!,
+);
+const freeTextPlaceholder = computed(
+  () =>
+    freeTextPlaceholderProp ??
+    labels.value.feedbackDialogFreeTextPlaceholder ??
+    defaultChatKitLabels.feedbackDialogFreeTextPlaceholder!,
+);
+const cancelLabel = computed(
+  () =>
+    cancelLabelProp ??
+    labels.value.feedbackDialogCancelLabel ??
+    defaultChatKitLabels.feedbackDialogCancelLabel!,
+);
+const submitLabel = computed(
+  () =>
+    submitLabelProp ??
+    labels.value.feedbackDialogSubmitLabel ??
+    defaultChatKitLabels.feedbackDialogSubmitLabel!,
+);
+
+const selectedReason = ref('');
+const freeText = ref('');
+
+// Per-instance id so the label/textarea association stays correct even when
+// several dialogs are mounted at once.
+const freeTextId = useId();
+
+watch(
+  () => open,
+  (isOpen, wasOpen) => {
+    if (isOpen && !wasOpen) {
+      selectedReason.value = '';
+      freeText.value = '';
+    }
+  },
+);
+
+const showResponseColumn = computed(
+  () => typeof responseText === 'string' && responseText !== '',
+);
+const characterCount = computed(() => freeText.value.length);
+const canSubmit = computed(
+  () =>
+    !disabled &&
+    !submitting &&
+    (selectedReason.value !== '' || freeText.value.trim() !== ''),
+);
+
+function handleOpenChange(next: boolean): void {
+  // While submitting/disabled the dialog is non-interactive, so ignore
+  // reka-ui's close requests (ESC / outside-click / close icon). `open` is
+  // controlled, so not emitting keeps it open until the host closes it.
+  if (!next && (submitting || disabled)) {
+    return;
+  }
+  emit('update:open', next);
+  // reka-ui emits update:open(false) on ESC / outside-click / close icon —
+  // surface those as `cancel` too.
+  if (!next && open) {
+    emit('cancel');
+  }
+}
+
+function handleCancel(): void {
+  if (disabled || submitting) {
+    return;
+  }
+  emit('cancel');
+  emit('update:open', false);
+}
+
+function handleSubmit(): void {
+  if (!canSubmit.value) {
+    return;
+  }
+  emit('submit', {
+    sentiment,
+    reason: selectedReason.value === '' ? null : selectedReason.value,
+    reasonText: freeText.value.trim(),
+  });
+}
+</script>
+
+<template>
+  <UiDialog :open="open" @update:open="handleOpenChange">
+    <UiDialogContent
+      :title="title"
+      max-width="max-w-4xl"
+      class="ck-feedback-dialog"
+      :show-close-button="!(submitting || disabled)"
+    >
+      <UiDialogDescription class="sr-only">
+        {{ description }}
+      </UiDialogDescription>
+      <div
+        :class="[
+          'grid gap-12',
+          showResponseColumn ? 'grid-cols-2' : 'grid-cols-1',
+        ]"
+      >
+        <section v-if="showResponseColumn" class="flex min-h-0 flex-col gap-2">
+          <UiFieldLabel>{{ responseHeading }}</UiFieldLabel>
+          <div
+            class="ck-feedback-dialog__response min-h-0 flex-1 overflow-y-auto rounded-md border border-input bg-background-input-default px-3 py-2 shadow-xs"
+          >
+            <CkMarkdownRenderer :content="responseText" />
+          </div>
+        </section>
+
+        <section class="flex min-h-0 flex-col gap-4">
+          <UiToggleGroup
+            v-model="selectedReason"
+            type="single"
+            variant="outline"
+            :disabled="disabled || submitting"
+            class="grid grid-cols-2 gap-4"
+            :aria-label="title"
+          >
+            <UiToggleGroupItem
+              v-for="reason in reasons"
+              :key="reason.code"
+              :value="reason.code"
+              class="ck-feedback-dialog__chip"
+            >
+              {{ reason.label }}
+            </UiToggleGroupItem>
+          </UiToggleGroup>
+
+          <UiField>
+            <UiFieldLabel :for="freeTextId" :tooltip="otherTooltip">
+              {{ otherLabel }}
+            </UiFieldLabel>
+            <UiTextarea
+              :id="freeTextId"
+              v-model="freeText"
+              name="ck-feedback-dialog-free-text"
+              :placeholder="freeTextPlaceholder"
+              :disabled="disabled || submitting"
+              :maxlength="maxFreeTextLength"
+              rows="3"
+            />
+            <div
+              class="self-end text-sm text-content-on-surface-muted tabular-nums"
+              aria-live="polite"
+            >
+              {{ characterCount }}/{{ maxFreeTextLength }}
+            </div>
+          </UiField>
+        </section>
+      </div>
+
+      <template #actions>
+        <UiButton
+          type="button"
+          variant="outline"
+          :aria-label="cancelLabel"
+          :disabled="disabled || submitting"
+          @click="handleCancel"
+        >
+          {{ cancelLabel }}
+        </UiButton>
+        <UiButton
+          type="button"
+          variant="default"
+          :aria-label="submitLabel"
+          :loading="submitting"
+          :disabled="!canSubmit"
+          @click="handleSubmit"
+        >
+          {{ submitLabel }}
+        </UiButton>
+      </template>
+    </UiDialogContent>
+  </UiDialog>
+</template>
+
+<style scoped>
+.ck-feedback-dialog__chip {
+  width: 100%;
+  min-height: 36px;
+  height: auto;
+  justify-content: center;
+  text-align: center;
+  line-height: 1rem;
+}
+
+.ck-feedback-dialog__response :deep(p),
+.ck-feedback-dialog__response :deep(li) {
+  line-height: 1.5rem;
+}
+.ck-feedback-dialog__response :deep(p) {
+  margin: 0 0 0.5rem 0;
+}
+.ck-feedback-dialog__response :deep(p:last-child) {
+  margin-bottom: 0;
+}
+</style>

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

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

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

@@ -0,0 +1,155 @@
+/**
+ * Modal dialog for collecting qualitative feedback on an assistant response.
+ * Opened after a binary thumbs-up / thumbs-down click (see `CkFeedbackButton`),
+ * it lets the user pick a single reason code and add an optional free-text
+ * comment, then submit both alongside the original sentiment.
+ *
+ * One reason per submission: the backend (feedback-kit) stores a single
+ * `reason` enum per response, so the dialog is single-select by design.
+ *
+ * Fully prop-driven: the host application owns `open`, the list of reasons to
+ * show (fetched from `GET /feedback/config`), the response text to display, and
+ * the submission handler. The component only manages transient form state (the
+ * selected reason and free-text value) until the user submits or cancels.
+ *
+ * @category Feedback
+ * @useCases collect qualitative feedback, gather a reason code for a response,
+ *   capture a free-text comment, drive a two-step rating flow
+ * @keywords feedback, dialog, modal, reason codes, free text, qualitative,
+ *   rating, comment
+ * @related CkFeedbackButton, CkMessageActionButton, CkAgentMessage,
+ *   CkConversation, UiDialog, UiToggleGroup
+ */
+export type CkFeedbackSentiment = 'positive' | 'negative';
+
+/**
+ * A selectable reason: `code` is the stable machine value submitted to the
+ * backend; `label` is the human-readable string shown on the chip. Both come
+ * from the backend's `GET /feedback/config` so the UI never drifts from what
+ * the backend accepts.
+ */
+export interface CkFeedbackReason {
+  code: string;
+  label: string;
+}
+
+export interface CkFeedbackDialogSubmitPayload {
+  /** The sentiment the dialog was opened for. */
+  sentiment: CkFeedbackSentiment;
+  /** The selected reason `code`, or `null` if the user only left free text. */
+  reason: string | null;
+  /** Free-text comment, trimmed. Empty string when the user typed nothing. */
+  reasonText: string;
+}
+
+export interface CkFeedbackDialogProps {
+  /**
+   * Controlled open state. Use with `v-model:open`. When `true` the dialog is
+   * visible and form state is editable; when `false` the dialog is closed.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Which sentiment the user gave before this dialog opened. Drives the title
+   * ("Give positive feedback" vs "Give negative feedback") and is echoed back
+   * on submit.
+   */
+  sentiment: CkFeedbackSentiment;
+  /**
+   * The assistant response being rated. Rendered as markdown in the left
+   * column so the user can see what they're giving feedback on. Omit (or pass
+   * an empty string) to hide the response column entirely.
+   * @default undefined
+   */
+  responseText?: string;
+  /**
+   * Available reasons to render as single-select chips. The host fetches the
+   * appropriate per-sentiment list from `GET /feedback/config` and passes it
+   * here. The chip shows `label`; the selected `code` is emitted on submit.
+   */
+  reasons: CkFeedbackReason[];
+  /**
+   * Maximum length for the free-text input. The browser will hard-limit the
+   * field via the native `maxlength` attribute, and a "x/max" counter is
+   * shown beneath the textarea.
+   * @default 250
+   */
+  maxFreeTextLength?: number;
+  /**
+   * When `true`, the Submit button shows a busy state and clicks are ignored.
+   * Use while the parent is awaiting the backend POST.
+   * @default false
+   */
+  submitting?: boolean;
+  /**
+   * When `true`, both Submit and Cancel are non-interactive. Primarily used
+   * to keep the dialog frozen while showing a confirmation or error state
+   * before the host closes it.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Overrides the injected dialog title for positive feedback. Defaults to
+   * `useChatKitLabels().feedbackDialogTitlePositive`.
+   */
+  titlePositive?: string;
+  /**
+   * Overrides the injected dialog title for negative feedback. Defaults to
+   * `useChatKitLabels().feedbackDialogTitleNegative`.
+   */
+  titleNegative?: string;
+  /**
+   * Overrides the injected "Response" heading shown above the response
+   * preview column. Defaults to `useChatKitLabels().feedbackDialogResponseHeading`.
+   */
+  responseHeading?: string;
+  /**
+   * Screen-reader description for the dialog (sets `aria-describedby`; not
+   * shown visually). Defaults to `useChatKitLabels().feedbackDialogDescription`.
+   */
+  description?: string;
+  /**
+   * Overrides the injected "Other" label above the free-text input.
+   * Defaults to `useChatKitLabels().feedbackDialogOtherLabel`.
+   */
+  otherLabel?: string;
+  /**
+   * Tooltip text shown when the user hovers the (i) icon next to the "Other"
+   * label. Defaults to `useChatKitLabels().feedbackDialogOtherTooltip`.
+   */
+  otherTooltip?: string;
+  /**
+   * Placeholder text for the free-text input. Defaults to
+   * `useChatKitLabels().feedbackDialogFreeTextPlaceholder`.
+   */
+  freeTextPlaceholder?: string;
+  /**
+   * Label for the Cancel button. Defaults to
+   * `useChatKitLabels().feedbackDialogCancelLabel`.
+   */
+  cancelLabel?: string;
+  /**
+   * Label for the Submit button. Defaults to
+   * `useChatKitLabels().feedbackDialogSubmitLabel`.
+   */
+  submitLabel?: string;
+}
+
+export interface CkFeedbackDialogEmits {
+  /**
+   * Two-way binding for the `open` prop. Emitted when the dialog requests to
+   * be closed (Cancel button, close icon, ESC, or outside click).
+   */
+  (e: 'update:open', open: boolean): void;
+  /**
+   * Emitted when the user clicks Submit. The host should persist the payload
+   * (e.g. POST to `/feedback/`) then close the dialog by setting `open` to
+   * `false`. Not emitted while `submitting` or `disabled`.
+   */
+  (e: 'submit', payload: CkFeedbackDialogSubmitPayload): void;
+  /**
+   * Emitted when the user clicks Cancel or otherwise dismisses the dialog
+   * without submitting (close icon, ESC, outside click).
+   */
+  (e: 'cancel'): void;
+}

package/src/components/base/index.ts

@@ -8,6 +8,14 @@ export type {
   CkFeedbackButtonProps,
   CkFeedbackValue,
 } from './CkFeedbackButton';
+export { CkFeedbackDialog } from './CkFeedbackDialog';
+export type {
+  CkFeedbackDialogProps,
+  CkFeedbackDialogEmits,
+  CkFeedbackDialogSubmitPayload,
+  CkFeedbackReason,
+  CkFeedbackSentiment,
+} from './CkFeedbackDialog';
 export { CkFileItemsList } from './CkFileItemsList';
 export type {
   CkFileEntry,

package/src/components/index.ts

@@ -4,6 +4,7 @@ export {
   CkConversationLayout,
   CkCopyMessageActionButton,
   CkFeedbackButton,
+  CkFeedbackDialog,
   CkFileItemsList,
   CkHistoryItem,
   CkHistoryWrapper,
@@ -20,6 +21,11 @@ export {
 export type {
   CkConversationLayoutProps,
   CkFeedbackButtonProps,
+  CkFeedbackDialogEmits,
+  CkFeedbackDialogProps,
+  CkFeedbackDialogSubmitPayload,
+  CkFeedbackReason,
+  CkFeedbackSentiment,
   CkFeedbackValue,
   CkFileEntry,
   CkFileItemsListEmits,

package/src/handlers/useChatKitLabels.spec.ts

@@ -43,6 +43,17 @@ describe('useChatKitLabels', () => {
       feedbackThumbsUp: 'Gute Antwort',
       feedbackThumbsDown: 'Schlechte Antwort',
       feedbackGroup: 'Antwort bewerten',
+      feedbackDialogTitlePositive: 'Positives Feedback geben',
+      feedbackDialogTitleNegative: 'Negatives Feedback geben',
+      feedbackDialogResponseHeading: 'Antwort',
+      feedbackDialogDescription:
+        'Wählen Sie einen Grund und fügen Sie optional einen Kommentar hinzu.',
+      feedbackDialogOtherLabel: 'Sonstiges',
+      feedbackDialogOtherTooltip:
+        'Teilen Sie weitere Details zu dieser Antwort mit.',
+      feedbackDialogFreeTextPlaceholder: 'Zusätzliche Details eingeben',
+      feedbackDialogCancelLabel: 'Abbrechen',
+      feedbackDialogSubmitLabel: 'Senden',
       historyItemUntitled: 'Unbenannte Konversation',
       historyItemActionAriaLabel: 'Konversationsoptionen',
       historyItemEditAction: 'Bearbeiten',

package/src/handlers/useChatKitLabels.ts

@@ -47,6 +47,24 @@ export type ChatKitLabels = {
    * `defaultChatKitLabels.feedbackGroup` when omitted.
    */
   feedbackGroup?: string;
+  /** `CkFeedbackDialog` title when sentiment is `'positive'`. */
+  feedbackDialogTitlePositive?: string;
+  /** `CkFeedbackDialog` title when sentiment is `'negative'`. */
+  feedbackDialogTitleNegative?: string;
+  /** Heading above the response preview in `CkFeedbackDialog`. */
+  feedbackDialogResponseHeading?: string;
+  /** Screen-reader description for `CkFeedbackDialog` (sets `aria-describedby`). */
+  feedbackDialogDescription?: string;
+  /** "Other" label above the free-text input in `CkFeedbackDialog`. */
+  feedbackDialogOtherLabel?: string;
+  /** Tooltip on the (i) icon next to "Other" in `CkFeedbackDialog`. */
+  feedbackDialogOtherTooltip?: string;
+  /** Placeholder for the free-text input in `CkFeedbackDialog`. */
+  feedbackDialogFreeTextPlaceholder?: string;
+  /** Cancel button label in `CkFeedbackDialog`. */
+  feedbackDialogCancelLabel?: string;
+  /** Submit button label in `CkFeedbackDialog`. */
+  feedbackDialogSubmitLabel?: 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. */
@@ -67,6 +85,17 @@ export const defaultChatKitLabels: ChatKitLabels = {
   feedbackThumbsUp: 'Good response',
   feedbackThumbsDown: 'Bad response',
   feedbackGroup: 'Rate this response',
+  feedbackDialogTitlePositive: 'Give positive feedback',
+  feedbackDialogTitleNegative: 'Give negative feedback',
+  feedbackDialogResponseHeading: 'Response',
+  feedbackDialogDescription:
+    'Select a reason and optionally add a comment, then submit your feedback.',
+  feedbackDialogOtherLabel: 'Other',
+  feedbackDialogOtherTooltip:
+    'Add anything else you want to share about this response.',
+  feedbackDialogFreeTextPlaceholder: 'Write down some additional details',
+  feedbackDialogCancelLabel: 'Cancel',
+  feedbackDialogSubmitLabel: 'Submit',
   historyItemUntitled: 'Untitled conversation',
   historyItemActionAriaLabel: 'Conversation options',
   historyItemEditAction: 'Edit',