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

package/components/KChatInput.tsx

@@ -0,0 +1,58 @@
+/**
+ * @description Chat input — supports multi-line and Enter to send
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { defineComponent, ref } from 'vue';
+import './chat-input.css';
+
+export const KChatInput = defineComponent({
+  name: 'KChatInput',
+  props: {
+    placeholder: { type: String, default: '输入消息…' },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: ['send'],
+  setup(props, { emit }) {
+    const text = ref('');
+
+    function handleSend() {
+      const trimmed = text.value.trim();
+      if (!trimmed || props.disabled) return;
+      emit('send', trimmed);
+      text.value = '';
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    }
+
+    return () => (
+      <div class="k-chat-input">
+        <textarea
+          class="k-chat-input__textarea"
+          value={text.value}
+          onInput={(e: Event) => { text.value = (e.target as HTMLTextAreaElement).value; }}
+          onKeydown={handleKeydown}
+          placeholder={props.placeholder}
+          disabled={props.disabled}
+          rows={1}
+        />
+        <button
+          class="k-chat-input__send"
+          onClick={handleSend}
+          disabled={props.disabled || !text.value.trim()}
+        >
+          发送
+        </button>
+      </div>
+    );
+  },
+});

package/components/KChatPanel.tsx

@@ -0,0 +1,55 @@
+/**
+ * @description Main chat panel — renders message clusters with phase indicator
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { defineComponent, ref, nextTick, watch, onMounted, type PropType } from 'vue';
+import type { MessageCluster, ChatPhase } from '../composables/types';
+import { KMessageCluster } from './KMessageCluster';
+import { KPhaseIndicator } from './KPhaseIndicator';
+import './chat-panel.css';
+
+export const KChatPanel = defineComponent({
+  name: 'KChatPanel',
+  props: {
+    clusters: { type: Array as PropType<MessageCluster[]>, required: true },
+    phase: { type: String as PropType<ChatPhase>, default: 'idle' },
+  },
+  setup(props, { slots }) {
+    const scrollRef = ref<HTMLElement>();
+
+    function scrollToBottom() {
+      nextTick(() => {
+        const el = scrollRef.value;
+        if (el) {
+          el.scrollTop = el.scrollHeight;
+        }
+      });
+    }
+
+    onMounted(scrollToBottom);
+    watch(() => props.clusters.length, scrollToBottom);
+    watch(() => {
+      const last = props.clusters[props.clusters.length - 1];
+      if (!last) return 0;
+      const lastMsg = last.messages[last.messages.length - 1];
+      return lastMsg?.content.length ?? 0;
+    }, scrollToBottom);
+
+    return () => (
+      <div class="k-chat-panel">
+        <div class="k-chat-panel__messages" ref={scrollRef}>
+          {props.clusters.map(cluster => (
+            <KMessageCluster key={cluster.id} cluster={cluster} />
+          ))}
+          {slots.default?.()}
+        </div>
+        <KPhaseIndicator phase={props.phase} />
+      </div>
+    );
+  },
+});

package/components/KMessageBubble.tsx

@@ -0,0 +1,35 @@
+/**
+ * @description Single message bubble — supports streaming content
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { defineComponent, type PropType } from 'vue';
+import type { ChatMessage } from '../composables/types';
+import './message-bubble.css';
+
+export const KMessageBubble = defineComponent({
+  name: 'KMessageBubble',
+  props: {
+    message: { type: Object as PropType<ChatMessage>, required: true },
+  },
+  setup(props, { slots }) {
+    return () => {
+      const msg = props.message;
+      return (
+        <div class={[
+          'k-message-bubble',
+          `k-message-bubble--${msg.role}`,
+          `k-message-bubble--${msg.status}`,
+        ]}>
+          <div class="k-message-bubble__content">
+            {slots.default ? slots.default({ message: msg }) : msg.content}
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/components/KMessageCluster.tsx

@@ -0,0 +1,29 @@
+/**
+ * @description Message cluster — groups fragmented messages from the same sender
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { defineComponent, type PropType } from 'vue';
+import type { MessageCluster } from '../composables/types';
+import { KMessageBubble } from './KMessageBubble';
+import './message-cluster.css';
+
+export const KMessageCluster = defineComponent({
+  name: 'KMessageCluster',
+  props: {
+    cluster: { type: Object as PropType<MessageCluster>, required: true },
+  },
+  setup(props) {
+    return () => (
+      <div class={['k-message-cluster', `k-message-cluster--${props.cluster.role}`]}>
+        {props.cluster.messages.map(msg => (
+          <KMessageBubble key={msg.id} message={msg} />
+        ))}
+      </div>
+    );
+  },
+});

package/components/KPhaseIndicator.tsx

@@ -0,0 +1,39 @@
+/**
+ * @description Phase indicator — shows current chat phase with KLoading
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { defineComponent, computed, type PropType } from 'vue';
+import KLoading from 'kine-ui/components/loading/KLoading.tsx';
+import type { ChatPhase } from '../composables/types';
+import './phase-indicator.css';
+
+const PHASE_LABELS: Record<ChatPhase, string> = {
+  idle: '',
+  aggregating: '正在输入…',
+  thinking: '思考中…',
+  streaming: '回复中…',
+  sending: '发送中…',
+};
+
+export const KPhaseIndicator = defineComponent({
+  name: 'KPhaseIndicator',
+  props: {
+    phase: { type: String as PropType<ChatPhase>, required: true },
+  },
+  setup(props) {
+    const label = computed(() => PHASE_LABELS[props.phase]);
+    const visible = computed(() => props.phase !== 'idle');
+
+    return () => visible.value
+      ? <div class={['k-phase-indicator', `k-phase-indicator--${props.phase}`]}>
+          <KLoading size="small" />
+          <span>{label.value}</span>
+        </div>
+      : null;
+  },
+});

package/components/chat-input.css

@@ -0,0 +1,60 @@
+.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;
+}

package/components/chat-panel.css

@@ -0,0 +1,16 @@
+.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;
+}

package/components/message-bubble.css

@@ -0,0 +1,34 @@
+.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);
+}
+

package/components/message-cluster.css

@@ -0,0 +1,17 @@
+.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;
+}

package/components/phase-indicator.css

@@ -0,0 +1,8 @@
+.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);
+}

package/composables/createWebSocketTransport.ts

@@ -0,0 +1,104 @@
+/**
+ * @description WebSocket transport implementation
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import type {
+  ChatTransport,
+  OutgoingMessage,
+  ServerPushEvent,
+  TransportOptions,
+  TransportStatus,
+} from './types';
+
+export function createWebSocketTransport(): ChatTransport {
+  let ws: WebSocket | null = null;
+  let url = '';
+  let options: TransportOptions = {};
+  let reconnectAttempts = 0;
+  let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const eventHandlers: Array<(event: ServerPushEvent) => void> = [];
+  const statusHandlers: Array<(status: TransportStatus) => void> = [];
+
+  function emitStatus(status: TransportStatus) {
+    statusHandlers.forEach(h => h(status));
+  }
+
+  function handleMessage(raw: MessageEvent) {
+    try {
+      const event: ServerPushEvent = JSON.parse(raw.data);
+      eventHandlers.forEach(h => h(event));
+    } catch {
+      // non-JSON message, ignore
+    }
+  }
+
+  function tryReconnect() {
+    if (!options.reconnect) return;
+    const max = options.maxReconnectAttempts ?? 5;
+    if (reconnectAttempts >= max) {
+      emitStatus('disconnected');
+      return;
+    }
+    reconnectAttempts++;
+    emitStatus('reconnecting');
+    const interval = options.reconnectInterval ?? 3000;
+    reconnectTimer = setTimeout(() => connect(url, options), interval);
+  }
+
+  function connect(targetUrl: string, opts: TransportOptions = {}) {
+    url = targetUrl;
+    options = opts;
+    emitStatus('connecting');
+
+    ws = new WebSocket(targetUrl, opts.protocols);
+
+    ws.onopen = () => {
+      reconnectAttempts = 0;
+      emitStatus('connected');
+    };
+
+    ws.onmessage = handleMessage;
+
+    ws.onclose = () => {
+      ws = null;
+      tryReconnect();
+    };
+
+    ws.onerror = () => {
+      ws?.close();
+    };
+  }
+
+  function disconnect() {
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+    options.reconnect = false;
+    ws?.close();
+    ws = null;
+    emitStatus('disconnected');
+  }
+
+  function send(message: OutgoingMessage) {
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(message));
+    }
+  }
+
+  function onEvent(handler: (event: ServerPushEvent) => void) {
+    eventHandlers.push(handler);
+  }
+
+  function onStatusChange(handler: (status: TransportStatus) => void) {
+    statusHandlers.push(handler);
+  }
+
+  return { connect, disconnect, send, onEvent, onStatusChange };
+}

package/composables/types.ts

@@ -0,0 +1,117 @@
+/**
+ * @description AI Chat type definitions — fragmented streaming dialogue model
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export type MessageRole = 'user' | 'assistant' | 'system';
+
+export type MessageStatus = 'pending' | 'streaming' | 'complete' | 'interrupted';
+
+export interface ChatMessage {
+  id: string;
+  role: MessageRole;
+  content: string;
+  status: MessageStatus;
+  timestamp: number;
+  clusterId?: string;
+}
+
+export interface MessageCluster {
+  id: string;
+  role: MessageRole;
+  messages: ChatMessage[];
+  timestamp: number;
+}
+
+export type ChatPhase =
+  | 'idle'
+  | 'aggregating'
+  | 'thinking'
+  | 'streaming'
+  | 'sending';
+
+export interface Conversation {
+  id: string;
+  title: string;
+  clusters: MessageCluster[];
+  createdAt: number;
+  updatedAt: number;
+}
+
+export interface ServerPushEvent {
+  type: 'fragment' | 'fragment_end' | 'phase_change' | 'conversation_meta';
+  conversationId: string;
+  data: FragmentEvent | PhaseChangeEvent | ConversationMetaEvent;
+}
+
+export interface FragmentEvent {
+  messageId: string;
+  clusterId: string;
+  role: MessageRole;
+  content: string;
+  status: MessageStatus;
+}
+
+export interface PhaseChangeEvent {
+  phase: ChatPhase;
+}
+
+export interface ConversationMetaEvent {
+  title?: string;
+}
+
+export interface ChatTransport {
+  connect(url: string, options?: TransportOptions): void;
+  disconnect(): void;
+  send(message: OutgoingMessage): void;
+  onEvent(handler: (event: ServerPushEvent) => void): void;
+  onStatusChange(handler: (status: TransportStatus) => void): void;
+}
+
+export type TransportStatus = 'connecting' | 'connected' | 'disconnected' | 'reconnecting';
+
+export interface TransportOptions {
+  protocols?: string[];
+  headers?: Record<string, string>;
+  reconnect?: boolean;
+  reconnectInterval?: number;
+  maxReconnectAttempts?: number;
+}
+
+export interface OutgoingMessage {
+  conversationId: string;
+  content: string;
+  timestamp: number;
+}
+
+export interface UseChatOptions {
+  transport: ChatTransport;
+  conversationId?: string;
+}
+
+export interface UseChatReturn {
+  clusters: import('vue').Ref<MessageCluster[]>;
+  phase: import('vue').Ref<ChatPhase>;
+  transportStatus: import('vue').Ref<TransportStatus>;
+  conversationId: import('vue').Ref<string | undefined>;
+  send: (content: string) => void;
+  switchConversation: (id: string) => void;
+  clear: () => void;
+}
+
+export interface UseChatHistoryOptions {
+  storageKey?: string;
+}
+
+export interface UseChatHistoryReturn {
+  conversations: import('vue').Ref<Conversation[]>;
+  current: import('vue').Ref<Conversation | undefined>;
+  create: (title?: string) => Conversation;
+  remove: (id: string) => void;
+  rename: (id: string, title: string) => void;
+  select: (id: string) => void;
+}