@kine-design/ai-chat 0.0.1-beta.1

package/composables/useChat.ts

@@ -0,0 +1,139 @@
+/**
+ * @description Core chat composable — manages message clusters and server events
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { ref, onUnmounted } from 'vue';
+import type {
+  ChatPhase,
+  FragmentEvent,
+  MessageCluster,
+  PhaseChangeEvent,
+  ServerPushEvent,
+  TransportStatus,
+  UseChatOptions,
+  UseChatReturn,
+} from './types';
+
+export function useChat(options: UseChatOptions): UseChatReturn {
+  const { transport } = options;
+
+  const clusters = ref<MessageCluster[]>([]);
+  const phase = ref<ChatPhase>('idle');
+  const transportStatus = ref<TransportStatus>('disconnected');
+  const conversationId = ref<string | undefined>(options.conversationId);
+
+  function findOrCreateCluster(clusterId: string, role: FragmentEvent['role']): MessageCluster {
+    const existing = clusters.value.find(c => c.id === clusterId);
+    if (existing) return existing;
+
+    const cluster: MessageCluster = {
+      id: clusterId,
+      role,
+      messages: [],
+      timestamp: Date.now(),
+    };
+    clusters.value.push(cluster);
+    return cluster;
+  }
+
+  function handleFragment(data: FragmentEvent) {
+    const cluster = findOrCreateCluster(data.clusterId, data.role);
+    const existing = cluster.messages.find(m => m.id === data.messageId);
+
+    if (existing) {
+      if (data.status === 'streaming') {
+        existing.content += data.content;
+      } else {
+        existing.content = data.content;
+      }
+      existing.status = data.status;
+    } else {
+      cluster.messages.push({
+        id: data.messageId,
+        role: data.role,
+        content: data.content,
+        status: data.status,
+        timestamp: Date.now(),
+        clusterId: data.clusterId,
+      });
+    }
+  }
+
+  function handlePhaseChange(data: PhaseChangeEvent) {
+    phase.value = data.phase;
+  }
+
+  function handleEvent(event: ServerPushEvent) {
+    if (conversationId.value && event.conversationId !== conversationId.value) return;
+
+    switch (event.type) {
+      case 'fragment':
+        handleFragment(event.data as FragmentEvent);
+        break;
+      case 'fragment_end':
+        handleFragment({ ...(event.data as FragmentEvent), status: 'complete' });
+        break;
+      case 'phase_change':
+        handlePhaseChange(event.data as PhaseChangeEvent);
+        break;
+    }
+  }
+
+  transport.onEvent(handleEvent);
+  transport.onStatusChange(status => {
+    transportStatus.value = status;
+  });
+
+  function send(content: string) {
+    if (!conversationId.value) return;
+
+    const clusterId = `user-${Date.now()}`;
+    const messageId = `msg-${Date.now()}`;
+
+    const cluster = findOrCreateCluster(clusterId, 'user');
+    cluster.messages.push({
+      id: messageId,
+      role: 'user',
+      content,
+      status: 'complete',
+      timestamp: Date.now(),
+      clusterId,
+    });
+
+    transport.send({
+      conversationId: conversationId.value,
+      content,
+      timestamp: Date.now(),
+    });
+  }
+
+  function switchConversation(id: string) {
+    conversationId.value = id;
+    clusters.value = [];
+    phase.value = 'idle';
+  }
+
+  function clear() {
+    clusters.value = [];
+    phase.value = 'idle';
+  }
+
+  onUnmounted(() => {
+    transport.disconnect();
+  });
+
+  return {
+    clusters,
+    phase,
+    transportStatus,
+    conversationId,
+    send,
+    switchConversation,
+    clear,
+  };
+}

package/composables/useChatHistory.ts

@@ -0,0 +1,81 @@
+/**
+ * @description Chat history composable — multi-conversation management
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { ref, watch } from 'vue';
+import type { Conversation, UseChatHistoryOptions, UseChatHistoryReturn } from './types';
+
+function generateId(): string {
+  return `conv-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export function useChatHistory(options: UseChatHistoryOptions = {}): UseChatHistoryReturn {
+  const storageKey = options.storageKey ?? 'kine-ai-chat-history';
+
+  const conversations = ref<Conversation[]>([]);
+  const current = ref<Conversation | undefined>();
+
+  function load() {
+    try {
+      const raw = localStorage.getItem(storageKey);
+      if (raw) {
+        conversations.value = JSON.parse(raw);
+      }
+    } catch {
+      conversations.value = [];
+    }
+  }
+
+  function persist() {
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(conversations.value));
+    } catch {
+      // storage full or unavailable
+    }
+  }
+
+  load();
+  watch(conversations, persist, { deep: true });
+
+  function create(title?: string): Conversation {
+    const now = Date.now();
+    const conversation: Conversation = {
+      id: generateId(),
+      title: title ?? `对话 ${conversations.value.length + 1}`,
+      clusters: [],
+      createdAt: now,
+      updatedAt: now,
+    };
+    conversations.value.unshift(conversation);
+    current.value = conversation;
+    return conversation;
+  }
+
+  function remove(id: string) {
+    const idx = conversations.value.findIndex(c => c.id === id);
+    if (idx === -1) return;
+    conversations.value.splice(idx, 1);
+    if (current.value?.id === id) {
+      current.value = conversations.value[0];
+    }
+  }
+
+  function rename(id: string, title: string) {
+    const conv = conversations.value.find(c => c.id === id);
+    if (conv) {
+      conv.title = title;
+      conv.updatedAt = Date.now();
+    }
+  }
+
+  function select(id: string) {
+    current.value = conversations.value.find(c => c.id === id);
+  }
+
+  return { conversations, current, create, remove, rename, select };
+}

package/dist/ai-chat.css

@@ -0,0 +1,136 @@
+.k-message-bubble {
+  max-width: 70%;
+  margin-bottom: var(--kine-spacing-2);
+}
+
+.k-message-bubble__content {
+  padding: var(--kine-spacing-4) var(--kine-spacing-6);
+  border-radius: var(--kine-radius-lg);
+  font-size: var(--kine-font-size-xl);
+  line-height: 1.5;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.k-message-bubble--user .k-message-bubble__content {
+  background: color-mix(in srgb, var(--kine-color-accent-default) 15%, var(--kine-color-bg-tertiary));
+  color: var(--kine-color-text-primary);
+  border-bottom-right-radius: var(--kine-radius-xs);
+}
+
+.k-message-bubble--assistant .k-message-bubble__content {
+  background: var(--kine-color-bg-secondary);
+  color: var(--kine-color-text-primary);
+  border-bottom-left-radius: var(--kine-radius-xs);
+}
+
+.k-message-bubble--streaming .k-message-bubble__content {
+  opacity: 0.95;
+}
+
+.k-message-bubble--interrupted .k-message-bubble__content {
+  opacity: var(--kine-opacity-muted);
+}
+
+.k-message-cluster {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--kine-spacing-8);
+}
+
+.k-message-cluster--user {
+  align-items: flex-end;
+}
+
+.k-message-cluster--assistant {
+  align-items: flex-start;
+}
+
+.k-message-cluster--system {
+  align-items: center;
+}
+.k-phase-indicator {
+  display: flex;
+  align-items: center;
+  gap: var(--kine-spacing-3);
+  padding: var(--kine-spacing-2) var(--kine-spacing-8);
+  font-size: var(--kine-font-size-md);
+  color: var(--kine-color-text-muted);
+}
+.k-chat-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  font-family: var(--kine-font-family-mono);
+  color: var(--kine-color-text-primary);
+  background: var(--kine-color-bg-primary);
+}
+
+.k-chat-panel__messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--kine-spacing-8);
+  scroll-behavior: smooth;
+}
+.k-chat-input {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--kine-spacing-4);
+  padding: var(--kine-spacing-6) var(--kine-spacing-8);
+  border-top: 1px solid var(--kine-color-border-default);
+}
+
+.k-chat-input__textarea {
+  flex: 1;
+  resize: none;
+  box-sizing: border-box;
+  border: 1px solid var(--kine-control-border-color);
+  border-radius: var(--kine-radius-sm);
+  padding: var(--kine-spacing-4) var(--kine-spacing-6);
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-control-font-size-md);
+  line-height: 1.5;
+  outline: none;
+  background: var(--kine-control-bg);
+  color: var(--kine-color-text-primary);
+  min-height: var(--kine-control-height-md);
+  max-height: 120px;
+  overflow-y: auto;
+  transition: border-color var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-chat-input__textarea::placeholder {
+  color: var(--kine-color-text-muted);
+}
+
+.k-chat-input__textarea:focus {
+  border-color: var(--kine-color-accent-default);
+}
+
+.k-chat-input__send {
+  height: var(--kine-control-height-md);
+  padding: 0 var(--kine-control-padding-x-md);
+  border: 1px solid var(--kine-color-accent-default);
+  border-radius: var(--kine-control-radius);
+  background: color-mix(in srgb, var(--kine-color-accent-default) 10%, var(--kine-color-bg-tertiary));
+  color: var(--kine-color-accent-default);
+  font-family: var(--kine-font-family-mono);
+  font-size: var(--kine-control-font-size-md);
+  font-weight: var(--kine-font-weight-medium, 500);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all var(--kine-motion-duration-fast) var(--kine-motion-easing-default);
+}
+
+.k-chat-input__send:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--kine-color-accent-default) 18%, var(--kine-color-bg-primary));
+  border-color: var(--kine-color-accent-hover);
+  color: var(--kine-color-accent-hover);
+}
+
+.k-chat-input__send:disabled {
+  opacity: var(--kine-opacity-muted);
+  cursor: not-allowed;
+}
+/*$vite$:1*/