@aleph-alpha/chat-kit 1.0.0 → 1.1.0

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

@@ -0,0 +1,642 @@
+import type { BaseMessage } from '../../../types';
+import CkConversation from './CkConversation.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+
+const now = new Date();
+
+const markdownContent = [
+  '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.',
+  '- **User Training:** Tailored, hands-on training was found to be far more effective than generic sessions.',
+  '- **Centralized Feedback:** Establishing a centralized feedback loop was identified as crucial.',
+  '',
+  '## Best Practices & Successes',
+  '',
+  '1. **Phased Rollout:** A major success was the phased rollout of tools and processes.',
+  '2. **Cross-team Collaboration:** Regular sync meetings across departments improved alignment.',
+  '',
+  '> **Note:** For detailed metrics, refer to the project dashboard.',
+  '',
+  'Here is a quick summary:',
+  '',
+  '| Category | Status | Impact |',
+  '| --- | --- | --- |',
+  '| Stakeholder Engagement | Completed | High |',
+  '| Training Programs | In Progress | Medium |',
+  '| Feedback Integration | Planned | High |',
+].join('\n');
+
+const sampleMessages: BaseMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: 'Hello! Can you help me with something?',
+    createdAt: now,
+    status: 'completed',
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    content: 'Of course! I am here to help. What would you like to know?',
+    createdAt: now,
+    status: 'completed',
+  },
+  {
+    id: '3',
+    role: 'user',
+    content:
+      "Find the lessons learned and best practices from the 'Digital Transformation Phase 1' project, specifically focusing on process optimization and digital tool integration.",
+    createdAt: now,
+    status: 'completed',
+  },
+  {
+    id: '4',
+    role: 'assistant',
+    content: markdownContent,
+    createdAt: now,
+    status: 'completed',
+  },
+];
+
+const meta: Meta<typeof CkConversation> = {
+  title: 'Composed/CkConversation',
+  component: CkConversation,
+  tags: ['autodocs'],
+  argTypes: {
+    messages: {
+      control: 'object',
+      description: 'Array of messages to render in chronological order.',
+    },
+    agentAvatarImage: {
+      control: 'text',
+      description: 'URL of the avatar image shown next to every agent message.',
+    },
+    agentAvatarFallback: {
+      control: 'text',
+      description: 'Fallback text/initials when no avatar image is provided.',
+    },
+    agentLoadingImage: {
+      control: 'text',
+      description:
+        'Avatar image used while an agent message is being generated.',
+    },
+    agentMarkdownClasses: {
+      control: 'object',
+      description:
+        'Per-tag class overrides for markdown rendered inside agent messages.',
+    },
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div style="height: 400px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden;"><story /></div>',
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [
+  { id: '1', role: 'user', content: 'Hello!', createdAt: new Date(), status: 'completed' },
+  { id: '2', role: 'assistant', content: 'Hi there!', createdAt: new Date(), status: 'completed' },
+];
+</script>
+
+<template>
+  <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;" />
+</template>`;
+
+const withIconTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [/* ... */];
+</script>
+
+<template>
+  <CkConversation
+    :messages="messages"
+    agent-avatar-image="https://ui-avatars.com/api/?name=AI&background=6366f1&color=fff&size=64"
+    agent-avatar-fallback="AI"
+    style="height: 100%;"
+  />
+</template>`;
+
+const withCustomAvatarFallbackTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [/* ... */];
+</script>
+
+<template>
+  <CkConversation :messages="messages" agent-avatar-fallback="WB" style="height: 100%;" />
+</template>`;
+
+const noIconTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [/* ... */];
+</script>
+
+<template>
+  <CkConversation :messages="messages" style="height: 100%;" />
+</template>`;
+
+const withCustomIconTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [/* ... */];
+</script>
+
+<template>
+  <CkConversation :messages="messages" style="height: 100%;">
+    <template #agent-message-icon>
+      <div class="bg-core-bg-tertiary flex size-8 items-center justify-center rounded-full text-xs">AI</div>
+    </template>
+  </CkConversation>
+</template>`;
+
+const withFooterActionsTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [/* ... */];
+</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>
+  </CkConversation>
+</template>`;
+
+const withCustomUserContentTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [/* ... */];
+</script>
+
+<template>
+  <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
+    <template #user-message-content="{ message }">
+      <strong>{{ message.content }}</strong>
+    </template>
+  </CkConversation>
+</template>`;
+
+const withCustomAgentContentTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [/* ... */];
+</script>
+
+<template>
+  <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
+    <template #agent-message-content="{ message }">
+      <div class="whitespace-pre-wrap font-mono text-sm">{{ message.content }}</div>
+    </template>
+  </CkConversation>
+</template>`;
+
+const streamingSimulationTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+import { ref } from 'vue';
+
+const messages = ref<BaseMessage[]>([]);
+
+function sendAndStream(): void {
+  messages.value = [
+    ...messages.value,
+    { id: '1', role: 'user', content: 'Tell me something.', createdAt: new Date(), status: 'completed' },
+  ];
+  messages.value = [
+    ...messages.value,
+    { id: '2', role: 'assistant', content: '', createdAt: new Date(), status: 'sending' },
+  ];
+  const reply = 'Key lessons learned from the project...';
+  let i = 0;
+  const interval = setInterval(() => {
+    i = Math.min(i + 3, reply.length);
+    const last = messages.value.length - 1;
+    messages.value[last] = { ...messages.value[last], content: reply.slice(0, i) };
+    if (i >= reply.length) clearInterval(interval);
+  }, 30);
+}
+</script>
+
+<template>
+  <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 400px;" />
+  <button @click="sendAndStream">Send + simulate stream</button>
+</template>`;
+
+const withCustomMarkdownClassesTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [/* ... */];
+const customClasses = {
+  h2: 'mt-6 mb-3 text-2xl font-bold',
+  p: 'my-2 leading-8 text-lg',
+  a: 'text-blue-600 underline',
+};
+</script>
+
+<template>
+  <CkConversation
+    :messages="messages"
+    :agent-markdown-classes="customClasses"
+    agent-avatar-fallback="AI"
+    style="height: 100%;"
+  />
+</template>`;
+
+const withCustomCodeBlockTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+import type { BaseMessage } from '@aleph-alpha/chat-kit';
+
+const messages: BaseMessage[] = [/* ... */];
+</script>
+
+<template>
+  <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
+    <template #agent-message-code-block="{ code, language }">
+      <div class="rounded-lg bg-black p-4 font-mono text-white">
+        <div class="mb-2 text-xs uppercase opacity-60">{{ language }}</div>
+        <code>{{ code }}</code>
+      </div>
+    </template>
+  </CkConversation>
+</template>`;
+
+const emptyTemplateSource = `<script setup lang="ts">
+import { CkConversation } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkConversation :messages="[]" style="height: 100%;" />
+</template>`;
+
+/**
+ * Drop-in conversation UI. Pass `messages` with `role`, `content`, and `status`
+ * fields and CkConversation renders user bubbles, assistant markdown, avatars,
+ * and a copy button on each reply.
+ */
+export const Default: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return { messages: sampleMessages };
+    },
+    template:
+      '<CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;" />',
+  }),
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Uses a remote avatar image (with fallback text). Use when you want a
+ * branded agent identity in each reply.
+ */
+export const WithIcon: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return { messages: sampleMessages };
+    },
+    template:
+      '<CkConversation :messages="messages" agent-avatar-image="https://ui-avatars.com/api/?name=AI&background=6366f1&color=fff&size=64" agent-avatar-fallback="AI" style="height: 100%;" />',
+  }),
+  parameters: { docs: { source: { code: withIconTemplateSource } } },
+};
+
+/**
+ * Text-only avatar via `agent-avatar-fallback`. Use when you have no image
+ * and want to display initials instead.
+ */
+export const WithCustomAvatarFallback: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return { messages: sampleMessages };
+    },
+    template:
+      '<CkConversation :messages="messages" agent-avatar-fallback="WB" style="height: 100%;" />',
+  }),
+  parameters: {
+    docs: { source: { code: withCustomAvatarFallbackTemplateSource } },
+  },
+};
+
+/**
+ * Hides the avatar completely. Use for minimalist chat surfaces where the
+ * assistant identity is conveyed elsewhere (e.g. surrounding header).
+ */
+export const NoIcon: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return { messages: sampleMessages };
+    },
+    template: '<CkConversation :messages="messages" style="height: 100%;" />',
+  }),
+  parameters: { docs: { source: { code: noIconTemplateSource } } },
+};
+
+/**
+ * Replaces the default avatar with custom markup through the
+ * `#agent-message-icon` slot. Use to inject an emoji, Lottie animation, or
+ * your own branded icon.
+ */
+export const WithCustomIcon: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return { messages: sampleMessages };
+    },
+    template: `
+      <CkConversation :messages="messages" style="height: 100%;">
+        <template #agent-message-icon>
+          <div class="bg-core-bg-tertiary flex size-8 items-center justify-center rounded-full text-xs">🤖</div>
+        </template>
+      </CkConversation>
+    `,
+  }),
+  parameters: { docs: { source: { code: withCustomIconTemplateSource } } },
+};
+
+/**
+ * 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.
+ */
+export const WithFooterActions: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return { messages: sampleMessages };
+    },
+    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>
+      </CkConversation>
+    `,
+  }),
+  parameters: { docs: { source: { code: withFooterActionsTemplateSource } } },
+};
+
+/**
+ * Customizes the user message body via `#user-message-content`. Use to apply
+ * special typography, mentions, or attachments to user turns.
+ */
+export const WithCustomUserContent: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return { messages: sampleMessages };
+    },
+    template: `
+      <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
+        <template #user-message-content="{ message }">
+          <strong>{{ message.content }}</strong>
+        </template>
+      </CkConversation>
+    `,
+  }),
+  parameters: {
+    docs: { source: { code: withCustomUserContentTemplateSource } },
+  },
+};
+
+/**
+ * Replaces the default Markdown rendering with a custom layout via
+ * `#agent-message-content`. Use when you want raw content display or a
+ * different renderer.
+ */
+export const WithCustomAgentContent: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return { messages: sampleMessages };
+    },
+    template: `
+      <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
+        <template #agent-message-content="{ message }">
+          <div style="white-space: pre-wrap; font-family: monospace; font-size: 13px;">{{ message.content }}</div>
+        </template>
+      </CkConversation>
+    `,
+  }),
+  parameters: {
+    docs: { source: { code: withCustomAgentContentTemplateSource } },
+  },
+};
+
+/**
+ * End-to-end streaming scenario: appending a new user message and then
+ * streaming an assistant reply chunk-by-chunk. Use as a reference for wiring
+ * up an LLM SDK that emits token deltas.
+ */
+export const StreamingSimulation: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      const messages = ref<BaseMessage[]>([
+        {
+          id: '1',
+          role: 'user',
+          content: 'Hello!',
+          createdAt: now,
+          status: 'completed',
+        },
+        {
+          id: '2',
+          role: 'assistant',
+          content: 'Hi there!',
+          createdAt: now,
+          status: 'completed',
+        },
+      ]);
+
+      let streamInterval: ReturnType<typeof setInterval> | null = null;
+      let charIndex = 0;
+      let nextId = 3;
+
+      function streamNextChunk(): void {
+        if (charIndex >= markdownContent.length) {
+          if (streamInterval) clearInterval(streamInterval);
+          return;
+        }
+        // eslint-disable-next-line sonarjs/pseudo-random
+        const chunkSize = Math.floor(Math.random() * 5) + 3;
+        charIndex = Math.min(charIndex + chunkSize, markdownContent.length);
+        const lastIdx = messages.value.length - 1;
+        messages.value[lastIdx] = {
+          ...messages.value[lastIdx],
+          content: markdownContent.slice(0, charIndex),
+        };
+      }
+
+      function startStreaming(): void {
+        const id = String(nextId++);
+        messages.value = [
+          ...messages.value,
+          {
+            id,
+            role: 'assistant',
+            content: '',
+            createdAt: new Date(),
+            status: 'sending',
+          },
+        ];
+        charIndex = 0;
+        streamInterval = setInterval(streamNextChunk, 30);
+      }
+
+      function simulateStream(): void {
+        const id = String(nextId++);
+        messages.value = [
+          ...messages.value,
+          {
+            id,
+            role: 'user',
+            content:
+              'Tell me about Digital Transformation Phase 1 lessons learned.',
+            createdAt: new Date(),
+            status: 'completed',
+          },
+        ];
+        setTimeout(startStreaming, 500);
+      }
+
+      return { messages, simulateStream };
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; height: 100%;">
+        <CkConversation :messages="messages" agent-avatar-fallback="AI" style="flex: 1; min-height: 0;" />
+        <div style="padding: 8px; border-top: 1px solid #e0e0e0;">
+          <button @click="simulateStream" style="padding: 6px 16px; border-radius: 6px; background: #333; color: white; cursor: pointer;">
+            Send message + simulate stream
+          </button>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: { docs: { source: { code: streamingSimulationTemplateSource } } },
+};
+
+/**
+ * Overrides default Markdown element classes via `agent-markdown-classes`.
+ * Use to apply your design-system tokens to assistant replies without writing
+ * a custom renderer slot.
+ */
+export const WithCustomMarkdownClasses: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      return {
+        messages: sampleMessages,
+        customClasses: {
+          h2: 'mt-6 mb-3 text-2xl font-bold',
+          p: 'my-2 leading-8 text-lg',
+          a: 'text-blue-600 underline',
+        },
+      };
+    },
+    template:
+      '<CkConversation :messages="messages" :agent-markdown-classes="customClasses" agent-avatar-fallback="AI" style="height: 100%;" />',
+  }),
+  parameters: {
+    docs: { source: { code: withCustomMarkdownClassesTemplateSource } },
+  },
+};
+
+/**
+ * Integrates a custom code-block renderer (Shiki, Prism, etc.) via
+ * `#agent-message-code-block`. Use when you want syntax highlighting or
+ * inline copy buttons for assistant code.
+ */
+export const WithCustomCodeBlock: Story = {
+  render: () => ({
+    components: { CkConversation },
+    setup() {
+      const messages: BaseMessage[] = [
+        {
+          id: '1',
+          role: 'user',
+          content: 'Show me a code example',
+          createdAt: now,
+          status: 'completed',
+        },
+        {
+          id: '2',
+          role: 'assistant',
+          content: [
+            'Here is an example:',
+            '',
+            '```typescript',
+            'const greeting = "Hello, world!";',
+            'console.log(greeting);',
+            '```',
+            '',
+            'And another one:',
+            '',
+            '```python',
+            'def greet(name: str) -> str:',
+            '    return f"Hello, {name}!"',
+            '```',
+          ].join('\n'),
+          createdAt: now,
+          status: 'completed',
+        },
+      ];
+      return { messages };
+    },
+    template: `
+      <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
+        <template #agent-message-code-block="{ code, language }">
+          <div style="background: #1e1e1e; color: #d4d4d4; padding: 16px; border-radius: 8px; font-family: monospace; white-space: pre; margin: 8px 0;">
+            <div style="color: #888; font-size: 12px; margin-bottom: 8px; text-transform: uppercase;">{{ language }}</div>
+            <code>{{ code }}</code>
+          </div>
+        </template>
+      </CkConversation>
+    `,
+  }),
+  parameters: { docs: { source: { code: withCustomCodeBlockTemplateSource } } },
+};
+
+/**
+ * Empty state — an initial view before the first turn. Use to show a welcome
+ * screen, quick prompts, or onboarding content above this surface.
+ */
+export const Empty: Story = {
+  render: () => ({
+    components: { CkConversation },
+    template: '<CkConversation :messages="[]" style="height: 100%;" />',
+  }),
+  parameters: { docs: { source: { code: emptyTemplateSource } } },
+};