@aleph-alpha/chat-kit 1.0.0 → 1.2.0

package/src/components/composed/CkInput/CkInput.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import CkPromptActionButton from '../../base/CkPromptActionButton/CkPromptActionButton.vue';
+import CkPromptStopButton from '../../base/CkPromptStopButton/CkPromptStopButton.vue';
+import CkPromptInput from '../../base/CkPromptInput/CkPromptInput.vue';
+import CkPromptInputDisclaimer from '../../base/CkPromptInputDisclaimer/CkPromptInputDisclaimer.vue';
+import CkSendIcon from '../../base/icons/CkSendIcon.vue';
+import CkStopIcon from '../../base/icons/CkStopIcon.vue';
+import type { CkInputProps } from './types';
+import { computed, useTemplateRef } from 'vue';
+
+defineOptions({ name: 'CkInput' });
+
+const props = withDefaults(defineProps<CkInputProps>(), {
+  modelValue: '',
+  placeholder: 'Ask me anything',
+  disabled: false,
+  loading: false,
+  maxHeight: 200,
+  ariaLabel: 'Chat message input',
+  stopAriaLabel: 'Stop generating',
+  disclaimer: undefined,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'submit', value: string): void;
+  (e: 'stop'): void;
+}>();
+
+const promptInputRef =
+  useTemplateRef<InstanceType<typeof CkPromptInput>>('promptInputRef');
+
+const isDisabled = computed(() => props.disabled || props.loading);
+
+function onUpdateModelValue(value: string): void {
+  emit('update:modelValue', value);
+}
+
+function onSubmit(value: string): void {
+  emit('submit', value);
+}
+
+function onStop(): void {
+  emit('stop');
+}
+
+function focus(): void {
+  promptInputRef.value?.focus();
+}
+
+function submit(): void {
+  promptInputRef.value?.submit();
+}
+
+defineExpose({ focus, submit });
+</script>
+
+<template>
+  <CkPromptInput
+    ref="promptInputRef"
+    :model-value="modelValue"
+    :placeholder="placeholder"
+    :disabled="isDisabled"
+    :max-height="maxHeight"
+    :aria-label="ariaLabel"
+    @update:model-value="onUpdateModelValue"
+    @submit="onSubmit"
+  >
+    <template v-if="$slots['toolbar-left']" #toolbar-left>
+      <slot name="toolbar-left" />
+    </template>
+
+    <template #toolbar-right="scope">
+      <slot name="toolbar-right" v-bind="scope">
+        <CkPromptStopButton
+          v-if="loading"
+          :aria-label="stopAriaLabel"
+          :disabled="disabled"
+          @click="onStop"
+        >
+          <slot name="stop-icon">
+            <CkStopIcon />
+          </slot>
+        </CkPromptStopButton>
+        <CkPromptActionButton
+          v-else
+          v-bind="{ ariaLabel: 'Send message' }"
+          type="submit"
+          :disabled="scope.disabled"
+        >
+          <slot name="send-icon">
+            <CkSendIcon />
+          </slot>
+        </CkPromptActionButton>
+      </slot>
+    </template>
+
+    <template #footer>
+      <slot name="footer">
+        <CkPromptInputDisclaimer v-if="disclaimer" :text="disclaimer" />
+      </slot>
+    </template>
+  </CkPromptInput>
+</template>

package/src/components/composed/CkInput/index.ts

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

package/src/components/composed/CkInput/types.ts

@@ -0,0 +1,60 @@
+/**
+ * Drop-in chat input: combines `CkPromptInput`, a `CkPromptActionButton` send
+ * button, and a `CkPromptInputDisclaimer`. Supports `v-model`, loading and
+ * disabled states, and slots to customize the toolbar and footer.
+ *
+ * @category Form Inputs
+ * @useCases chat compose input, prompt box with send button, llm input with disclaimer, quick-start chat input, turnkey chat input
+ * @keywords input, prompt, chat, send, compose, disclaimer, loading, v-model, textarea
+ * @related CkPromptInput, CkPromptActionButton, CkPromptInputDisclaimer, CkConversation
+ */
+export interface CkInputProps {
+  /**
+   * Current value of the input. Supports `v-model`.
+   * @default ''
+   */
+  modelValue?: string;
+  /**
+   * Placeholder shown when the input is empty.
+   * @default 'Ask me anything'
+   */
+  placeholder?: string;
+  /**
+   * Whether the input is disabled. Also implied when `loading` is `true`.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Shows a spinner in the send button and disables the input while a reply
+   * is being generated.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Max height (in px) of the underlying textarea before it becomes scrollable.
+   * @default 200
+   */
+  maxHeight?: number;
+  /**
+   * Accessible label for the input.
+   * @default 'Chat message input'
+   */
+  ariaLabel?: string;
+  /**
+   * Accessible label for the stop generating button.
+   * @default 'Stop generating'
+   */
+  stopAriaLabel?: string;
+  /**
+   * Optional disclaimer text rendered below the input via
+   * `CkPromptInputDisclaimer`. Omit to render no disclaimer.
+   */
+  disclaimer?: string;
+}
+
+export interface CkInputEmits {
+  /** Emitted on every keystroke. */
+  (e: 'update:modelValue', value: string): void;
+  /** Emitted when the user submits via Enter or the send button. */
+  (e: 'submit', value: string): void;
+}

package/src/components/composed/index.ts

@@ -0,0 +1,5 @@
+export { CkConversation } from './CkConversation';
+export type { CkConversationProps } from './CkConversation';
+export { CkHistory } from './CkHistory';
+export type { CkHistoryEmits, CkHistoryProps } from './CkHistory';
+export { CkInput } from './CkInput';

package/src/components/index.ts

@@ -0,0 +1,34 @@
+// Base (presentational) components
+export {
+  CkAgentMessage,
+  CkConversationLayout,
+  CkCopyMessageActionButton,
+  CkHistoryItem,
+  CkHistoryWrapper,
+  CkMarkdownRenderer,
+  CkMessageActionButton,
+  CkPromptActionButton,
+  CkPromptStopButton,
+  CkPromptInput,
+  CkPromptInputDisclaimer,
+  CkSendIcon,
+  CkStopIcon,
+  CkUserMessage,
+} from './base';
+export type {
+  CkConversationLayoutProps,
+  CkHistoryItemEmits,
+  CkHistoryItemProps,
+  CkHistoryWrapperProps,
+  CkMarkdownElementClasses,
+  CkMarkdownRendererProps,
+  CkUserMessageProps,
+} from './base';
+
+// Composed (pattern) components
+export { CkConversation, CkHistory, CkInput } from './composed';
+export type {
+  CkConversationProps,
+  CkHistoryEmits,
+  CkHistoryProps,
+} from './composed';

package/src/composables/index.ts

@@ -0,0 +1,15 @@
+export { useChat } from './useChat';
+export { useConversations } from './useConversations';
+export type {
+  CreateConversationInput,
+  MutationOptions,
+  UseConversationsOptions,
+  UseConversationsReturn,
+} from './useConversations';
+export { useConversationSessions } from './useConversationSessions';
+export type {
+  ConversationSession,
+  MessageHandler,
+  UseConversationSessionsReturn,
+} from './useConversationSessions';
+export type { ChatActions, ChatState, UseChatReturn } from './types';

package/src/composables/types.ts

@@ -0,0 +1,36 @@
+import type { ChatMessage, ChatResponse } from '../services/types';
+import type { BaseMessage } from '../types';
+import type { Ref } from 'vue';
+
+/**
+ * State managed by the chat composable
+ */
+export interface ChatState {
+  messages: BaseMessage[];
+  isLoading: Ref<boolean>;
+  error: Ref<Error | null>;
+}
+
+/**
+ * Actions provided by the chat composable
+ */
+export interface ChatActions {
+  sendMessage: (message: ChatMessage) => Promise<void>;
+  clearMessages: () => void;
+  retryLastMessage: () => Promise<void>;
+}
+
+/**
+ * Return type for the useChat composable
+ */
+export interface UseChatReturn {
+  // State
+  messages: BaseMessage[];
+  isLoading: Ref<boolean>;
+  error: Ref<Error | null>;
+
+  // Actions
+  sendMessage: (message: ChatMessage) => Promise<ChatResponse>;
+  clearMessages?: () => void;
+  retryLastMessage?: () => Promise<void>;
+}

package/src/composables/useChat.ts

@@ -0,0 +1,18 @@
+/**
+ * Composable function signature for chat functionality
+ *
+ * This is a skeleton function signature that defines the contract
+ * for the useChat composable. Implementations should provide the
+ * actual logic for managing chat state and interactions.
+ *
+ * @param service - The chat service instance to use
+ * @param config - Optional configuration for the composable
+ * @returns Object containing chat state and actions
+ *
+ * @example
+ * ```typescript
+ * const chat = useChat();
+ * await chat.sendMessage({ role: 'user', content: 'Hello' });
+ * ```
+ */
+export function useChat() {}

package/src/composables/useConversationSessions.spec.ts

@@ -0,0 +1,86 @@
+import { nextTick } from 'vue';
+import { useConversationSessions } from './useConversationSessions';
+
+describe('useConversationSessions', () => {
+  it('starts with no active session', () => {
+    const sessions = useConversationSessions();
+
+    expect(sessions.activeSession.value).toBeNull();
+    expect(sessions.messageHandler.value).toBeNull();
+    expect(sessions.messageHandler.value?.messages.value ?? []).toEqual([]);
+  });
+
+  it('createSession is idempotent', () => {
+    const sessions = useConversationSessions();
+    const a = sessions.createSession('c1');
+    const b = sessions.createSession('c1');
+
+    expect(a).toBe(b);
+    expect(sessions.getSession('c1')).toBe(a);
+  });
+
+  it('isolates message trees per session', () => {
+    const sessions = useConversationSessions();
+    const sa = sessions.createSession('a');
+    const sb = sessions.createSession('b');
+
+    expect(sa.messageHandler).not.toBe(sb.messageHandler);
+
+    sa.messageHandler.setCurrentUserMessage('from A');
+    sa.messageHandler.commitUserMessage();
+
+    expect(sa.messageHandler.messages.value).toHaveLength(1);
+    expect(sb.messageHandler.messages.value).toHaveLength(0);
+  });
+
+  it('activeSession tracks the focused conversation handler', async () => {
+    const sessions = useConversationSessions();
+    sessions.createSession('a');
+    sessions.createSession('b');
+    sessions.setActiveConversation('a');
+
+    sessions.activeSession.value?.messageHandler.setCurrentUserMessage('hi');
+    sessions.activeSession.value?.messageHandler.commitUserMessage();
+
+    expect(
+      sessions.activeSession.value?.messageHandler.messages.value,
+    ).toHaveLength(1);
+    expect(
+      sessions.getSession('b')?.messageHandler.messages.value,
+    ).toHaveLength(0);
+
+    sessions.setActiveConversation('b');
+    await nextTick();
+
+    expect(sessions.messageHandler.value).toBe(
+      sessions.getSession('b')?.messageHandler,
+    );
+    expect(sessions.messageHandler.value?.messages.value).toHaveLength(0);
+  });
+
+  it('updating a background session does not change the focused handler messages', async () => {
+    const sessions = useConversationSessions();
+    const sa = sessions.createSession('a');
+    sessions.createSession('b');
+    sessions.setActiveConversation('b');
+
+    sa.messageHandler.setCurrentUserMessage('background');
+    sa.messageHandler.commitUserMessage();
+
+    await nextTick();
+    expect(sessions.messageHandler.value?.messages.value ?? []).toEqual([]);
+    expect(sa.messageHandler.messages.value).toHaveLength(1);
+  });
+
+  it('removeSession clears focus when that session was active', () => {
+    const sessions = useConversationSessions();
+    sessions.createSession('x');
+    sessions.setActiveConversation('x');
+
+    sessions.removeSession('x');
+
+    expect(sessions.getSession('x')).toBeUndefined();
+    expect(sessions.activeSession.value).toBeNull();
+    expect(sessions.messageHandler.value).toBeNull();
+  });
+});

package/src/composables/useConversationSessions.ts

@@ -0,0 +1,85 @@
+import { useMessageHandler } from '../handlers';
+import { computed, ref, type ComputedRef, type Ref } from 'vue';
+
+export type MessageHandler = ReturnType<typeof useMessageHandler>;
+
+/** One conversation’s runtime message tree (`useMessageHandler` per id). */
+export interface ConversationSession {
+  readonly id: string;
+  readonly messageHandler: MessageHandler;
+}
+
+/**
+ * Per-conversation `useMessageHandler` instances; `setActiveConversation` picks
+ * which session is exposed as `activeSession` / `messageHandler`.
+ */
+export interface UseConversationSessionsReturn {
+  /** Focused session, or `null`. */
+  activeSession: ComputedRef<ConversationSession | null>;
+  /** `activeSession?.messageHandler`, or `null`. */
+  messageHandler: ComputedRef<MessageHandler | null>;
+  /** Get or create a session for `conversationId` (idempotent). */
+  createSession: (conversationId: string) => ConversationSession;
+  /** Session if it exists; does not create. */
+  getSession: (conversationId: string) => ConversationSession | undefined;
+  /** Focus `conversationId` (creates session if needed), or `null` to unfocus. */
+  setActiveConversation: (conversationId: string | null) => void;
+  /** Remove session; clears focus if it was active. */
+  removeSession: (conversationId: string) => void;
+}
+
+/** Registry of sessions by id (plain `Map` so nested refs stay valid). */
+export function useConversationSessions(): UseConversationSessionsReturn {
+  const sessions = new Map<string, ConversationSession>();
+  const focusedId: Ref<string | null> = ref(null);
+
+  function createSession(conversationId: string): ConversationSession {
+    const existing = sessions.get(conversationId);
+    if (existing) return existing;
+
+    const session: ConversationSession = {
+      id: conversationId,
+      messageHandler: useMessageHandler(),
+    };
+    sessions.set(conversationId, session);
+    return session;
+  }
+
+  function getSession(conversationId: string): ConversationSession | undefined {
+    return sessions.get(conversationId);
+  }
+
+  function setActiveConversation(conversationId: string | null): void {
+    if (conversationId === null) {
+      focusedId.value = null;
+      return;
+    }
+    createSession(conversationId);
+    focusedId.value = conversationId;
+  }
+
+  function removeSession(conversationId: string): void {
+    sessions.delete(conversationId);
+    if (focusedId.value === conversationId) {
+      focusedId.value = null;
+    }
+  }
+
+  const activeSession = computed<ConversationSession | null>(() => {
+    const id = focusedId.value;
+    return id !== null ? (sessions.get(id) ?? null) : null;
+  });
+
+  const messageHandler = computed<MessageHandler | null>(
+    () => activeSession.value?.messageHandler ?? null,
+  );
+
+  return {
+    activeSession,
+    messageHandler,
+    createSession,
+    getSession,
+    setActiveConversation,
+    removeSession,
+  };
+}