@aleph-alpha/chat-kit 0.9.0 → 1.1.0

package/src/components/base/CkCopyMessageActionButton/CkCopyMessageActionButton.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { CkMessageActionButton } from '../CkMessageActionButton';
+import type { CkCopyMessageActionButtonProps } from './types';
+import { UiIcon, UiTooltip } from '@aleph-alpha/ui-library';
+import { onUnmounted, ref } from 'vue';
+
+defineOptions({
+  name: 'CkCopyMessageActionButton',
+});
+
+const props = withDefaults(defineProps<CkCopyMessageActionButtonProps>(), {
+  disabled: false,
+  durationMs: 3000,
+  ariaLabelCopy: 'Copy message',
+  ariaLabelCopied: 'Copied',
+  writeToClipboard: undefined,
+});
+
+const emit = defineEmits<{
+  copy: [payload: { success: boolean }];
+}>();
+
+const copied = ref(false);
+const tooltipOpen = ref(false);
+let resetTimer: ReturnType<typeof setTimeout> | undefined;
+
+onUnmounted(() => {
+  if (resetTimer !== undefined) {
+    clearTimeout(resetTimer);
+  }
+});
+
+async function handleClick() {
+  if (props.disabled) {
+    return;
+  }
+
+  // The underlying tooltip auto-dismisses on pointerdown of the trigger.
+  // Force it open synchronously so the "copied" state is visible on click.
+  tooltipOpen.value = true;
+
+  try {
+    const write =
+      props.writeToClipboard ??
+      ((t: string) => globalThis.navigator.clipboard.writeText(t));
+    await write(props.text);
+    copied.value = true;
+    tooltipOpen.value = true;
+    emit('copy', { success: true });
+    if (resetTimer !== undefined) {
+      clearTimeout(resetTimer);
+    }
+    resetTimer = setTimeout(() => {
+      copied.value = false;
+      resetTimer = undefined;
+    }, props.durationMs);
+  } catch {
+    emit('copy', { success: false });
+  }
+}
+</script>
+
+<template>
+  <UiTooltip
+    v-model:open="tooltipOpen"
+    :content="copied ? ariaLabelCopied : ariaLabelCopy"
+    side="bottom"
+    align="center"
+    :delay-duration="0"
+  >
+    <CkMessageActionButton
+      v-bind="{ ariaLabel: copied ? ariaLabelCopied : ariaLabelCopy }"
+      :disabled="disabled"
+      @click="handleClick"
+    >
+      <Transition name="copy-message-icon-fade" mode="out-in">
+        <UiIcon
+          v-if="!copied"
+          key="copy"
+          name="copy"
+          :size="16"
+          aria-hidden="true"
+        />
+        <UiIcon v-else key="check" name="check" :size="16" aria-hidden="true" />
+      </Transition>
+    </CkMessageActionButton>
+    <span class="sr-only" aria-live="polite">
+      {{ copied ? ariaLabelCopied : ariaLabelCopy }}
+    </span>
+  </UiTooltip>
+</template>
+
+<style scoped>
+.copy-message-icon-fade-enter-active,
+.copy-message-icon-fade-leave-active {
+  transition: opacity 0.15s ease-out;
+}
+
+.copy-message-icon-fade-enter-from,
+.copy-message-icon-fade-leave-to {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .copy-message-icon-fade-enter-active,
+  .copy-message-icon-fade-leave-active {
+    transition-duration: 0.01ms;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,43 @@
+/**
+ * Copy-to-clipboard action button for chat messages. Shows a check icon and
+ * announces success for assistive technologies, then reverts after a delay.
+ *
+ * @category Actions
+ * @useCases copy assistant reply, copy message to clipboard, chat message action, feedback action on message footer
+ * @keywords copy, clipboard, action, message, button, icon, feedback
+ * @related CkMessageActionButton, CkAgentMessage, CkConversation
+ */
+export interface CkCopyMessageActionButtonProps {
+  /** Plain text to copy to the clipboard. */
+  text: string;
+  /**
+   * Whether the button is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * How long to show the success state (checkmark) before reverting, in ms.
+   * @default 3000
+   */
+  durationMs?: number;
+  /**
+   * `aria-label` used while the button is in its idle (copy) state.
+   * @default 'Copy message'
+   */
+  ariaLabelCopy?: string;
+  /**
+   * `aria-label` used after the text has been copied.
+   * @default 'Copied'
+   */
+  ariaLabelCopied?: string;
+  /**
+   * Optional clipboard writer for testing or custom implementations.
+   * When omitted, uses `navigator.clipboard.writeText`.
+   */
+  writeToClipboard?: (text: string) => Promise<void>;
+}
+
+export interface CkCopyMessageActionButtonEmits {
+  /** Emitted after the clipboard operation finishes (success or failure). */
+  (e: 'copy', payload: { success: boolean }): void;
+}

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

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import CkHistoryItem from './CkHistoryItem.vue';
+
+describe('CkHistoryItem', () => {
+  it('renders the title and meta', () => {
+    render(CkHistoryItem, {
+      props: {
+        title: 'Thread A',
+        metaStart: 'Mon',
+        metaEnd: 'Berlin',
+      },
+    });
+
+    expect(screen.getByText('Thread A')).toBeInTheDocument();
+    expect(screen.getByText('Mon')).toBeInTheDocument();
+    expect(screen.getByText('Berlin')).toBeInTheDocument();
+  });
+
+  it('emits action-click when the action button is clicked', async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+
+    const { emitted } = render(CkHistoryItem, {
+      props: {
+        title: 'Thread A',
+        metaStart: 'Mon',
+        showActionOnHover: false,
+        actionAriaLabel: 'More',
+      },
+      attrs: {
+        onActionClick: onAction,
+      },
+    });
+
+    await user.click(screen.getByRole('button', { name: 'More' }));
+
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(emitted('action-click')).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,230 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import CkHistoryItem from './CkHistoryItem.vue';
+
+const meta: Meta<typeof CkHistoryItem> = {
+  title: 'Base/CkHistoryItem',
+  component: CkHistoryItem,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Single chat history entry: title, optional meta line, row focus ring, and trailing action (button or popover). Emits **`action-click`** when the action is a plain button; use **`actionPopover`** with `#action-popover` slot for menu content. Sidebar-agnostic.',
+      },
+    },
+  },
+  args: {
+    title: 'Project Proposal Overview',
+    metaStart: 'Today',
+    metaEnd: 'Innsbruck',
+    actionTooltip: 'More actions',
+  },
+  argTypes: {
+    isActive: {
+      control: 'boolean',
+      description: 'Applies the active row treatment (rail + background).',
+    },
+    showActionOnHover: {
+      control: 'boolean',
+      description: 'Fade in the action until row hover/focus-within.',
+    },
+    actionPopover: {
+      control: 'boolean',
+      description:
+        'Render the action as a popover trigger; supply body via `#action-popover` slot.',
+    },
+    actionIcon: {
+      control: false,
+      description: 'Custom icon component (assign in code).',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CkHistoryItem>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkHistoryItem } from '@aleph-alpha/chat-kit';
+
+function handleActionClick() {
+  // open row menu, etc.
+}
+</script>
+
+<template>
+  <CkHistoryItem
+    title="Project Proposal Overview"
+    meta-start="Today"
+    meta-end="Innsbruck"
+    action-tooltip="More actions"
+    @action-click="handleActionClick"
+  />
+</template>`;
+
+const activeTemplateSource = `<script setup lang="ts">
+import { CkHistoryItem } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkHistoryItem
+    title="Project Proposal Overview"
+    meta-start="Today"
+    meta-end="Innsbruck"
+    action-tooltip="More actions"
+    is-active
+  />
+</template>`;
+
+const alwaysShowActionTemplateSource = `<script setup lang="ts">
+import { CkHistoryItem } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkHistoryItem
+    title="Project Proposal Overview"
+    meta-start="Today"
+    meta-end="Innsbruck"
+    action-tooltip="More actions"
+    :show-action-on-hover="false"
+  />
+</template>`;
+
+const noMetaTemplateSource = `<script setup lang="ts">
+import { CkHistoryItem } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkHistoryItem title="Project Proposal Overview" action-tooltip="More actions" />
+</template>`;
+
+const withActionPopoverTemplateSource = `<script setup lang="ts">
+import { CkHistoryItem } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkHistoryItem
+    title="Project Proposal Overview"
+    meta-start="Today"
+    meta-end="Innsbruck"
+    action-popover
+    action-aria-label="Chat options"
+  >
+    <template #action-popover>
+      <div class="flex flex-col gap-0.5 p-1">
+        <button type="button">Rename</button>
+        <button type="button">Delete</button>
+      </div>
+    </template>
+  </CkHistoryItem>
+</template>`;
+
+const renderStory = (args: Story['args']) => ({
+  components: { CkHistoryItem },
+  setup() {
+    const actionCount = ref(0);
+
+    function handleActionClick() {
+      actionCount.value += 1;
+    }
+
+    return { actionCount, args, handleActionClick };
+  },
+  template: `
+    <div class="bg-background-surface-primary p-4 w-[22rem]">
+      <CkHistoryItem v-bind="args" @action-click="handleActionClick" />
+      <p class="label-12-regular mt-3 text-content-on-surface-muted">
+        Action clicks: {{ actionCount }}
+      </p>
+    </div>
+  `,
+});
+
+/**
+ * Default row with title, two-segment meta line, and a kebab action that
+ * appears on hover. Use for one-off rows outside of `CkHistory`.
+ */
+export const Default: Story = {
+  render: renderStory,
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Active treatment — shows the left rail and highlighted background. Use
+ * when the row represents the conversation currently displayed.
+ */
+export const Active: Story = {
+  args: {
+    isActive: true,
+  },
+  render: renderStory,
+  parameters: { docs: { source: { code: activeTemplateSource } } },
+};
+
+/**
+ * Forces the trailing action to stay visible (`show-action-on-hover="false"`).
+ * Use on touch devices or when hover isn't available.
+ */
+export const AlwaysShowAction: Story = {
+  args: {
+    showActionOnHover: false,
+  },
+  render: renderStory,
+  parameters: { docs: { source: { code: alwaysShowActionTemplateSource } } },
+};
+
+/**
+ * Row without any meta text. Use for compact lists where only the title
+ * matters.
+ */
+export const NoMeta: Story = {
+  args: {
+    metaStart: '',
+    metaEnd: '',
+  },
+  render: renderStory,
+  parameters: { docs: { source: { code: noMetaTemplateSource } } },
+};
+
+/**
+ * Renders the trailing action as a popover trigger. Pass menu items via the
+ * `#action-popover` slot; the component handles opening and focus.
+ */
+export const WithActionPopover: Story = {
+  args: {
+    actionPopover: true,
+    actionTooltip: '',
+    actionAriaLabel: 'Chat options',
+  },
+  render: (args) => ({
+    components: { CkHistoryItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="bg-background-surface-primary p-4 w-[22rem]">
+        <CkHistoryItem v-bind="args">
+          <template #action-popover>
+            <div class="flex flex-col gap-0.5 p-1">
+              <button
+                type="button"
+                class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left body-14-regular text-content-on-surface-primary hover-layer hover-layer-default"
+              >
+                Rename
+              </button>
+              <button
+                type="button"
+                class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left body-14-regular text-content-on-surface-primary hover-layer hover-layer-default"
+              >
+                Delete
+              </button>
+            </div>
+          </template>
+        </CkHistoryItem>
+      </div>
+    `,
+  }),
+  parameters: { docs: { source: { code: withActionPopoverTemplateSource } } },
+};