@aleph-alpha/chat-kit 1.12.0 → 1.14.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/CkUserMessage/CkUserMessage.spec.ts

@@ -1,6 +1,9 @@
 import CkUserMessage from './CkUserMessage.vue';
 import { render, screen } from '@testing-library/vue';
 
+const CONTENT_SELECTOR = '.ck-user-message__content';
+const CLAMPED_CLASS = 'ck-user-message__content--clamped';
+
 describe('CkUserMessage', () => {
   it('displays the message text from prop', () => {
     render(CkUserMessage, { props: { message: 'Hello from tests' } });
@@ -17,4 +20,26 @@ describe('CkUserMessage', () => {
     expect(screen.getByText('Custom slot content')).toBeInTheDocument();
     expect(screen.queryByText('Fallback text')).not.toBeInTheDocument();
   });
+
+  describe('collapsedLines clamping', () => {
+    it('does not clamp or render a toggle when collapsedLines is omitted', () => {
+      const { container } = render(CkUserMessage, {
+        props: { message: 'A message' },
+      });
+
+      const content = container.querySelector(CONTENT_SELECTOR);
+      expect(content).not.toHaveClass(CLAMPED_CLASS);
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('clamps the content to the requested number of lines', () => {
+      const { container } = render(CkUserMessage, {
+        props: { message: 'A long message', collapsedLines: 3 },
+      });
+
+      const content = container.querySelector<HTMLElement>(CONTENT_SELECTOR);
+      expect(content).toHaveClass(CLAMPED_CLASS);
+      expect(content?.style.getPropertyValue('--ck-collapsed-lines')).toBe('3');
+    });
+  });
 });

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

@@ -11,6 +11,11 @@ const meta: Meta<typeof CkUserMessage> = {
       description:
         'The message text to display. Can also be provided via the default slot.',
     },
+    collapsedLines: {
+      control: { type: 'number', min: 0 },
+      description:
+        'When > 0, clamp the message to this many lines with a fade and a "Show more" / "Show less" toggle (shown only when the content overflows). 0 disables clamping.',
+    },
   },
   decorators: [
     () => ({
@@ -61,6 +66,22 @@ import { CkUserMessage } from '@aleph-alpha/chat-kit';
   </CkUserMessage>
 </template>`;
 
+const collapsibleMessage =
+  'Lorem ipsum dolor sit amet consectetur. Scelerisque justo pharetra enim eros risus. ' +
+  'Urna dictumst ultrices mattis tristique lacus in in. Elit sed in a pellentesque purus ' +
+  'lectus quis. Massa facilisis eget etiam maecenas eget libero iaculis consectetur. ' +
+  'Curabitur vivamus a nulla cras venenatis nec ultrices donec. Dui tempus posuere nulla ' +
+  'in id dictumst id congue odio. At lacus elit sit amet. Sodales lorem lacus faucibus ' +
+  'condimentum lectus auctor.';
+
+const collapsibleTemplateSource = `<script setup lang="ts">
+import { CkUserMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkUserMessage :collapsed-lines="4" message="..." />
+</template>`;
+
 /**
  * Standard user message bubble populated via the `message` prop. Use as the
  * default way to render the user turn in a conversation.
@@ -110,3 +131,16 @@ export const WithSlotContent: Story = {
   }),
   parameters: { docs: { source: { code: withSlotContentTemplateSource } } },
 };
+
+/**
+ * Long message clamped to 4 lines. The last visible line fades out and a
+ * centered "Show more" / "Show less" toggle expands and collapses the text.
+ * The toggle only appears when the content actually overflows the clamp.
+ */
+export const Collapsible: Story = {
+  args: {
+    message: collapsibleMessage,
+    collapsedLines: 4,
+  },
+  parameters: { docs: { source: { code: collapsibleTemplateSource } } },
+};

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

@@ -1,19 +1,129 @@
 <script setup lang="ts">
+import {
+  defaultChatKitLabels,
+  useChatKitLabels,
+} from '../../../handlers/useChatKitLabels';
 import type { CkUserMessageProps } from './types';
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
 
 defineOptions({ name: 'CkUserMessage' });
 
-defineProps<CkUserMessageProps>();
+const props = withDefaults(defineProps<CkUserMessageProps>(), {
+  message: undefined,
+  collapsedLines: 0,
+});
+
+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!,
+);
+
+/** Clamping is opt-in: only active when a positive `collapsedLines` is given. */
+const clampEnabled = computed(() => (props.collapsedLines ?? 0) > 0);
+
+const contentRef = ref<HTMLElement | null>(null);
+const expanded = ref(false);
+const isOverflowing = ref(false);
+
+function measure() {
+  const el = contentRef.value;
+  if (!el || !clampEnabled.value || expanded.value) return;
+  isOverflowing.value = el.scrollHeight - el.clientHeight > 1;
+}
+
+function toggle() {
+  expanded.value = !expanded.value;
+}
+
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+  nextTick(measure);
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => measure());
+    if (contentRef.value) resizeObserver.observe(contentRef.value);
+  }
+});
+
+onBeforeUnmount(() => resizeObserver?.disconnect());
+
+// New content (or a changed clamp) re-evaluates from the collapsed state.
+watch([() => props.message, () => props.collapsedLines], () => {
+  expanded.value = false;
+  nextTick(measure);
+});
 </script>
 
 <template>
-  <div
-    class="bg-background-surface-primary inline-flex max-w-[600px] flex-col items-end justify-start gap-4 rounded-xl p-6"
-  >
+  <div class="inline-flex max-w-[536px] flex-col items-end justify-start gap-1">
     <div
-      class="text-content-on-surface-primary justify-start self-stretch text-base leading-6 font-normal"
+      ref="contentRef"
+      class="ck-user-message__content text-content-on-surface-muted min-w-0 max-w-full self-stretch text-lg leading-7 font-medium break-words whitespace-pre-wrap [overflow-wrap:anywhere]"
+      :class="{
+        'ck-user-message__content--clamped': clampEnabled && !expanded,
+        'ck-user-message__content--faded':
+          clampEnabled && !expanded && isOverflowing,
+      }"
+      :style="
+        clampEnabled ? { '--ck-collapsed-lines': collapsedLines } : undefined
+      "
     >
       <slot>{{ message }}</slot>
     </div>
+    <button
+      v-if="clampEnabled && isOverflowing"
+      type="button"
+      :aria-expanded="expanded"
+      class="ck-user-message__toggle label-12-medium text-content-on-surface-primary bg-background-surface-floating focus-visible:ring-ring self-center rounded-3xl px-3 py-2 focus-visible:ring-2 focus-visible:outline-none"
+      @click="toggle"
+    >
+      {{ expanded ? showLessLabel : showMoreLabel }}
+    </button>
   </div>
 </template>
+
+<style scoped>
+/* Floating pill per design — the inset white + soft drop shadow aren't
+   expressible with the design-system shadow utilities, so set them here. */
+.ck-user-message__toggle {
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.05),
+    0 0 4px 0 #fff inset;
+}
+
+/* text-lg has a 1.75rem (28px) line-height; clamp height = lines × line-height. */
+.ck-user-message__content--clamped {
+  max-height: calc(var(--ck-collapsed-lines) * 1.75rem);
+  overflow: hidden;
+}
+
+/* Fade the last visible line to low opacity. */
+.ck-user-message__content--faded {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    #000 calc(100% - 1.75rem),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    #000 calc(100% - 1.75rem),
+    transparent 100%
+  );
+}
+</style>

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

@@ -1,14 +1,23 @@
 /**
- * Bubble layout for a single user turn in a conversation. Renders the message
- * text on the right side with a tokenized background and max-width; supports
- * a default slot for custom inline content.
+ * Layout for a single user turn in a conversation. Renders the message text
+ * right-aligned in the muted on-surface color with a max-width; supports a
+ * default slot for custom inline content. When `collapsedLines` is set, long
+ * messages are clamped with a fade and a "Show more" / "Show less" toggle.
  *
  * @category Messages
- * @useCases render user message bubble, conversation turn from user, chat input preview, right-aligned message
- * @keywords user, message, bubble, chat, conversation, turn
+ * @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
  */
 export interface CkUserMessageProps {
   /** Text content of the user message. Rendered inside the bubble when no default slot is provided. */
   message?: string;
+  /**
+   * When greater than `0`, collapse the message to at most this many lines.
+   * The last visible line fades out and a "Show more" / "Show less" toggle is
+   * revealed only when the content actually overflows. Omit or pass `0`
+   * (the default) to render the full message with no clamping — preserving the
+   * original behavior for existing consumers.
+   */
+  collapsedLines?: number;
 }