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

package/.vlaude/last-session-id

@@ -0,0 +1 @@
+6e6ccc4f-850a-43c4-b677-5af5ae931d77

package/composables/__tests__/createSocketIOTransport.test.ts

@@ -0,0 +1,181 @@
+/**
+ * @description Socket.IO transport unit tests
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { createSocketIOTransport } from '../createSocketIOTransport';
+import type { ServerPushEvent, TransportStatus } from '../types';
+
+const listeners: Record<string, Function[]> = {};
+const ioListeners: Record<string, Function[]> = {};
+
+const mockSocket = {
+  on: vi.fn((event: string, handler: Function) => {
+    (listeners[event] ??= []).push(handler);
+  }),
+  emit: vi.fn(),
+  disconnect: vi.fn(),
+  io: {
+    on: vi.fn((event: string, handler: Function) => {
+      (ioListeners[event] ??= []).push(handler);
+    }),
+  },
+};
+
+vi.mock('socket.io-client', () => ({
+  io: vi.fn(() => mockSocket),
+}));
+
+function fireSocketEvent(event: string, ...args: unknown[]) {
+  listeners[event]?.forEach(h => h(...args));
+}
+
+function fireIOEvent(event: string, ...args: unknown[]) {
+  ioListeners[event]?.forEach(h => h(...args));
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  for (const key of Object.keys(listeners)) delete listeners[key];
+  for (const key of Object.keys(ioListeners)) delete ioListeners[key];
+});
+
+describe('createSocketIOTransport', () => {
+  it('connect emits connecting then connected on socket connect', () => {
+    const transport = createSocketIOTransport();
+    const statuses: TransportStatus[] = [];
+    transport.onStatusChange(s => statuses.push(s));
+
+    transport.connect('http://localhost:9506');
+    expect(statuses).toEqual(['connecting']);
+
+    fireSocketEvent('connect');
+    expect(statuses).toEqual(['connecting', 'connected']);
+  });
+
+  it('disconnect emits disconnected', () => {
+    const transport = createSocketIOTransport();
+    const statuses: TransportStatus[] = [];
+    transport.onStatusChange(s => statuses.push(s));
+
+    transport.connect('http://localhost:9506');
+    transport.disconnect();
+
+    expect(mockSocket.disconnect).toHaveBeenCalled();
+    expect(statuses[statuses.length - 1]).toBe('disconnected');
+  });
+
+  it('reconnect_attempt emits reconnecting', () => {
+    const transport = createSocketIOTransport();
+    const statuses: TransportStatus[] = [];
+    transport.onStatusChange(s => statuses.push(s));
+
+    transport.connect('http://localhost:9506');
+    fireIOEvent('reconnect_attempt');
+
+    expect(statuses).toContain('reconnecting');
+  });
+
+  it('send emits chat:send with OutgoingMessage', () => {
+    const transport = createSocketIOTransport();
+    transport.connect('http://localhost:9506');
+
+    const msg = { conversationId: 'conv-1', content: 'hello', timestamp: Date.now() };
+    transport.send(msg);
+
+    expect(mockSocket.emit).toHaveBeenCalledWith('chat:send', msg);
+  });
+
+  it('receives chat:event and forwards to handlers', () => {
+    const transport = createSocketIOTransport();
+    const events: ServerPushEvent[] = [];
+    transport.onEvent(e => events.push(e));
+
+    transport.connect('http://localhost:9506');
+
+    const pushEvent: ServerPushEvent = {
+      type: 'fragment_end',
+      conversationId: 'conv-1',
+      data: {
+        messageId: 'msg-1',
+        clusterId: 'ac-1',
+        role: 'assistant',
+        content: 'hello',
+        status: 'complete',
+      },
+    };
+    fireSocketEvent('chat:event', pushEvent);
+
+    expect(events).toEqual([pushEvent]);
+  });
+
+  it('receives phase_change events', () => {
+    const transport = createSocketIOTransport();
+    const events: ServerPushEvent[] = [];
+    transport.onEvent(e => events.push(e));
+
+    transport.connect('http://localhost:9506');
+
+    const pushEvent: ServerPushEvent = {
+      type: 'phase_change',
+      conversationId: 'conv-1',
+      data: { phase: 'thinking' },
+    };
+    fireSocketEvent('chat:event', pushEvent);
+
+    expect(events).toHaveLength(1);
+    expect(events[0].type).toBe('phase_change');
+  });
+
+  it('passes auth and headers to socket.io options', async () => {
+    const { io } = await import('socket.io-client');
+    const transport = createSocketIOTransport();
+
+    transport.connect('http://localhost:9506', {
+      auth: { token: 'my-token' },
+      headers: { 'X-Custom': 'value' },
+      reconnect: true,
+      maxReconnectAttempts: 3,
+      reconnectInterval: 1000,
+    });
+
+    expect(io).toHaveBeenCalledWith('http://localhost:9506', {
+      auth: { token: 'my-token' },
+      extraHeaders: { 'X-Custom': 'value' },
+      reconnection: true,
+      reconnectionAttempts: 3,
+      reconnectionDelay: 1000,
+    });
+  });
+
+  it('multiple event handlers all receive events', () => {
+    const transport = createSocketIOTransport();
+    const events1: ServerPushEvent[] = [];
+    const events2: ServerPushEvent[] = [];
+    transport.onEvent(e => events1.push(e));
+    transport.onEvent(e => events2.push(e));
+
+    transport.connect('http://localhost:9506');
+
+    const pushEvent: ServerPushEvent = {
+      type: 'fragment_end',
+      conversationId: 'conv-1',
+      data: {
+        messageId: 'msg-1',
+        clusterId: 'ac-1',
+        role: 'assistant',
+        content: 'test',
+        status: 'complete',
+      },
+    };
+    fireSocketEvent('chat:event', pushEvent);
+
+    expect(events1).toHaveLength(1);
+    expect(events2).toHaveLength(1);
+  });
+});

package/composables/__tests__/createWebSocketTransport.test.ts

@@ -0,0 +1,145 @@
+/**
+ * @description WebSocket transport unit tests
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { createWebSocketTransport } from '../createWebSocketTransport';
+import type { ServerPushEvent, TransportStatus } from '../types';
+
+let mockWs: {
+  onopen: (() => void) | null;
+  onclose: (() => void) | null;
+  onerror: (() => void) | null;
+  onmessage: ((e: { data: string }) => void) | null;
+  send: ReturnType<typeof vi.fn>;
+  close: ReturnType<typeof vi.fn>;
+  readyState: number;
+};
+
+beforeEach(() => {
+  mockWs = {
+    onopen: null,
+    onclose: null,
+    onerror: null,
+    onmessage: null,
+    send: vi.fn(),
+    close: vi.fn(),
+    readyState: 1,
+  };
+
+  const MockWebSocket = function () { return mockWs; } as unknown as typeof WebSocket;
+  Object.defineProperty(MockWebSocket, 'OPEN', { value: 1 });
+  vi.stubGlobal('WebSocket', MockWebSocket);
+});
+
+describe('createWebSocketTransport', () => {
+  it('connect emits connecting then connected on ws open', () => {
+    const transport = createWebSocketTransport();
+    const statuses: TransportStatus[] = [];
+    transport.onStatusChange(s => statuses.push(s));
+
+    transport.connect('ws://localhost:9506/chat');
+    expect(statuses).toEqual(['connecting']);
+
+    mockWs.onopen?.();
+    expect(statuses).toEqual(['connecting', 'connected']);
+  });
+
+  it('disconnect closes ws and emits disconnected', () => {
+    const transport = createWebSocketTransport();
+    const statuses: TransportStatus[] = [];
+    transport.onStatusChange(s => statuses.push(s));
+
+    transport.connect('ws://localhost:9506/chat');
+    transport.disconnect();
+
+    expect(mockWs.close).toHaveBeenCalled();
+    expect(statuses[statuses.length - 1]).toBe('disconnected');
+  });
+
+  it('send serializes OutgoingMessage as JSON', () => {
+    const transport = createWebSocketTransport();
+    transport.connect('ws://localhost:9506/chat');
+    mockWs.onopen?.();
+
+    const msg = { conversationId: 'conv-1', content: 'hello', timestamp: 1000 };
+    transport.send(msg);
+
+    expect(mockWs.send).toHaveBeenCalledWith(JSON.stringify(msg));
+  });
+
+  it('receives messages and forwards parsed ServerPushEvent to handlers', () => {
+    const transport = createWebSocketTransport();
+    const events: ServerPushEvent[] = [];
+    transport.onEvent(e => events.push(e));
+
+    transport.connect('ws://localhost:9506/chat');
+    mockWs.onopen?.();
+
+    const pushEvent: ServerPushEvent = {
+      type: 'fragment_end',
+      conversationId: 'conv-1',
+      data: {
+        messageId: 'msg-1',
+        clusterId: 'ac-1',
+        role: 'assistant',
+        content: 'hello',
+        status: 'complete',
+      },
+    };
+    mockWs.onmessage?.({ data: JSON.stringify(pushEvent) });
+
+    expect(events).toEqual([pushEvent]);
+  });
+
+  it('ignores non-JSON messages', () => {
+    const transport = createWebSocketTransport();
+    const events: ServerPushEvent[] = [];
+    transport.onEvent(e => events.push(e));
+
+    transport.connect('ws://localhost:9506/chat');
+    mockWs.onopen?.();
+    mockWs.onmessage?.({ data: 'not json' });
+
+    expect(events).toHaveLength(0);
+  });
+
+  it('reconnects on close when reconnect is enabled', () => {
+    vi.useFakeTimers();
+    const transport = createWebSocketTransport();
+    const statuses: TransportStatus[] = [];
+    transport.onStatusChange(s => statuses.push(s));
+
+    transport.connect('ws://localhost:9506/chat', {
+      reconnect: true,
+      reconnectInterval: 1000,
+      maxReconnectAttempts: 3,
+    });
+    mockWs.onopen?.();
+    mockWs.onclose?.();
+
+    expect(statuses).toContain('reconnecting');
+
+    vi.advanceTimersByTime(1000);
+    // reconnect creates a new WebSocket — verify by checking status went to reconnecting
+    expect(statuses).toContain('reconnecting');
+
+    vi.useRealTimers();
+  });
+
+  it('does not reconnect when reconnect is disabled', () => {
+    const transport = createWebSocketTransport();
+    const statuses: TransportStatus[] = [];
+    transport.onStatusChange(s => statuses.push(s));
+
+    transport.connect('ws://localhost:9506/chat', { reconnect: false });
+    mockWs.onclose?.();
+
+    expect(statuses).not.toContain('reconnecting');
+  });
+});

package/composables/createSocketIOTransport.ts

@@ -0,0 +1,76 @@
+/**
+ * @description Socket.IO transport — speaks ServerPushEvent protocol over Socket.IO
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { io, type Socket } from 'socket.io-client';
+import type {
+  ChatTransport,
+  OutgoingMessage,
+  ServerPushEvent,
+  TransportOptions,
+  TransportStatus,
+} from './types';
+
+export function createSocketIOTransport(): ChatTransport {
+  let socket: Socket | null = null;
+
+  const eventHandlers: Array<(event: ServerPushEvent) => void> = [];
+  const statusHandlers: Array<(status: TransportStatus) => void> = [];
+
+  function emitStatus(status: TransportStatus) {
+    statusHandlers.forEach(h => h(status));
+  }
+
+  function connect(url: string, options: TransportOptions = {}) {
+    emitStatus('connecting');
+
+    socket = io(url, {
+      auth: options.auth,
+      extraHeaders: options.headers,
+      reconnection: options.reconnect ?? true,
+      reconnectionAttempts: options.maxReconnectAttempts ?? 5,
+      reconnectionDelay: options.reconnectInterval ?? 3000,
+    });
+
+    socket.on('connect', () => {
+      emitStatus('connected');
+    });
+
+    socket.on('disconnect', () => {
+      emitStatus('disconnected');
+    });
+
+    socket.io.on('reconnect_attempt', () => {
+      emitStatus('reconnecting');
+    });
+
+    socket.on('chat:event', (event: ServerPushEvent) => {
+      eventHandlers.forEach(h => h(event));
+    });
+  }
+
+  function disconnect() {
+    socket?.disconnect();
+    socket = null;
+    emitStatus('disconnected');
+  }
+
+  function send(message: OutgoingMessage) {
+    socket?.emit('chat:send', 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

@@ -77,6 +77,7 @@ export type TransportStatus = 'connecting' | 'connected' | 'disconnected' | 'rec
 export interface TransportOptions {
   protocols?: string[];
   headers?: Record<string, string>;
+  auth?: Record<string, string>;
   reconnect?: boolean;
   reconnectInterval?: number;
   maxReconnectAttempts?: number;

package/dist/ai-chat.js

@@ -1,4 +1,5 @@
 import { computed, createTextVNode, createVNode, defineComponent, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { io } from "socket.io-client";
 import KLoading from "kine-ui/components/loading/KLoading.tsx";
 //#region composables/useChat.ts
 /**
@@ -254,6 +255,67 @@ function createWebSocketTransport() {
 	};
 }
 //#endregion
+//#region composables/createSocketIOTransport.ts
+/**
+* @description Socket.IO transport — speaks ServerPushEvent protocol over Socket.IO
+* @author 阿怪
+* @date 2026/5/7
+* @version v0.0.1
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+function createSocketIOTransport() {
+	let socket = null;
+	const eventHandlers = [];
+	const statusHandlers = [];
+	function emitStatus(status) {
+		statusHandlers.forEach((h) => h(status));
+	}
+	function connect(url, options = {}) {
+		emitStatus("connecting");
+		socket = io(url, {
+			auth: options.auth,
+			extraHeaders: options.headers,
+			reconnection: options.reconnect ?? true,
+			reconnectionAttempts: options.maxReconnectAttempts ?? 5,
+			reconnectionDelay: options.reconnectInterval ?? 3e3
+		});
+		socket.on("connect", () => {
+			emitStatus("connected");
+		});
+		socket.on("disconnect", () => {
+			emitStatus("disconnected");
+		});
+		socket.io.on("reconnect_attempt", () => {
+			emitStatus("reconnecting");
+		});
+		socket.on("chat:event", (event) => {
+			eventHandlers.forEach((h) => h(event));
+		});
+	}
+	function disconnect() {
+		socket?.disconnect();
+		socket = null;
+		emitStatus("disconnected");
+	}
+	function send(message) {
+		socket?.emit("chat:send", message);
+	}
+	function onEvent(handler) {
+		eventHandlers.push(handler);
+	}
+	function onStatusChange(handler) {
+		statusHandlers.push(handler);
+	}
+	return {
+		connect,
+		disconnect,
+		send,
+		onEvent,
+		onStatusChange
+	};
+}
+//#endregion
 //#region components/KMessageBubble.tsx
 /**
 * @description Single message bubble — supports streaming content
@@ -433,4 +495,4 @@ var KChatInput = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { KChatInput, KChatPanel, KMessageBubble, KMessageCluster, KPhaseIndicator, createWebSocketTransport, useChat, useChatHistory };
+export { KChatInput, KChatPanel, KMessageBubble, KMessageCluster, KPhaseIndicator, createSocketIOTransport, createWebSocketTransport, useChat, useChatHistory };

package/dist/composables/__tests__/createSocketIOTransport.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description Socket.IO transport unit tests
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export {};

package/dist/composables/__tests__/createWebSocketTransport.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description WebSocket transport unit tests
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export {};

package/dist/composables/createSocketIOTransport.d.ts

@@ -0,0 +1,2 @@
+import { ChatTransport } from './types';
+export declare function createSocketIOTransport(): ChatTransport;

package/dist/composables/types.d.ts

@@ -59,6 +59,7 @@ export type TransportStatus = 'connecting' | 'connected' | 'disconnected' | 'rec
 export interface TransportOptions {
     protocols?: string[];
     headers?: Record<string, string>;
+    auth?: Record<string, string>;
     reconnect?: boolean;
     reconnectInterval?: number;
     maxReconnectAttempts?: number;

package/dist/index.d.ts

@@ -9,6 +9,7 @@
 export { useChat } from './composables/useChat';
 export { useChatHistory } from './composables/useChatHistory';
 export { createWebSocketTransport } from './composables/createWebSocketTransport';
+export { createSocketIOTransport } from './composables/createSocketIOTransport';
 export type { MessageRole, MessageStatus, ChatMessage, MessageCluster, ChatPhase, Conversation, ServerPushEvent, FragmentEvent, PhaseChangeEvent, ConversationMetaEvent, ChatTransport, TransportStatus, TransportOptions, OutgoingMessage, UseChatOptions, UseChatReturn, UseChatHistoryOptions, UseChatHistoryReturn, } from './composables/types';
 export { KChatPanel } from './components/KChatPanel';
 export { KMessageCluster } from './components/KMessageCluster';

package/dist/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/index.ts

@@ -10,6 +10,7 @@
 export { useChat } from './composables/useChat';
 export { useChatHistory } from './composables/useChatHistory';
 export { createWebSocketTransport } from './composables/createWebSocketTransport';
+export { createSocketIOTransport } from './composables/createSocketIOTransport';
 
 export type {
   MessageRole,

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@kine-design/ai-chat",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.3",
   "type": "module",
   "main": "./dist/ai-chat.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
+    "socket.io-client": "^4.8.3",
     "vue": "^3.5.30",
-    "kine-ui": "0.0.1-beta.16"
+    "kine-ui": "^0.0.1-beta.18"
   },
   "publishConfig": {
     "access": "public",
@@ -14,8 +15,12 @@
       "dist"
     ]
   },
+  "devDependencies": {
+    "vitest": "^4.1.0"
+  },
   "scripts": {
-    "build": "vite build --config vite.config.build.ts"
+    "build": "vite build --config vite.config.build.ts",
+    "test": "vitest --run"
   },
   "module": "./dist/ai-chat.js",
   "exports": {

package/vite.config.build.ts

@@ -18,6 +18,7 @@ export default defineConfig({
       external: [
         'vue',
         /^kine-ui/,
+        /^socket\.io-client/,
       ],
       output: {
         assetFileNames: 'ai-chat.[ext]',

package/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
+export default defineConfig({
+  root: __dirname,
+  plugins: [vueJsx()],
+  test: {
+    include: ['**/__tests__/*.test.ts'],
+  },
+});