@aleph-alpha/chat-kit 0.9.0 → 1.1.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,9 @@
+export { useChat } from './useChat';
+export { useConversations } from './useConversations';
+export type {
+  CreateConversationInput,
+  MutationOptions,
+  UseConversationsOptions,
+  UseConversationsReturn,
+} from './useConversations';
+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() {}