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

package/dist/ai-chat.js

@@ -0,0 +1,436 @@
+import { computed, createTextVNode, createVNode, defineComponent, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import KLoading from "kine-ui/components/loading/KLoading.tsx";
+//#region composables/useChat.ts
+/**
+* @description Core chat composable — manages message clusters and server events
+* @author 阿怪
+* @date 2026/5/7
+* @version v0.0.1
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+function useChat(options) {
+	const { transport } = options;
+	const clusters = ref([]);
+	const phase = ref("idle");
+	const transportStatus = ref("disconnected");
+	const conversationId = ref(options.conversationId);
+	function findOrCreateCluster(clusterId, role) {
+		const existing = clusters.value.find((c) => c.id === clusterId);
+		if (existing) return existing;
+		const cluster = {
+			id: clusterId,
+			role,
+			messages: [],
+			timestamp: Date.now()
+		};
+		clusters.value.push(cluster);
+		return cluster;
+	}
+	function handleFragment(data) {
+		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) {
+		phase.value = data.phase;
+	}
+	function handleEvent(event) {
+		if (conversationId.value && event.conversationId !== conversationId.value) return;
+		switch (event.type) {
+			case "fragment":
+				handleFragment(event.data);
+				break;
+			case "fragment_end":
+				handleFragment({
+					...event.data,
+					status: "complete"
+				});
+				break;
+			case "phase_change":
+				handlePhaseChange(event.data);
+				break;
+		}
+	}
+	transport.onEvent(handleEvent);
+	transport.onStatusChange((status) => {
+		transportStatus.value = status;
+	});
+	function send(content) {
+		if (!conversationId.value) return;
+		const clusterId = `user-${Date.now()}`;
+		const messageId = `msg-${Date.now()}`;
+		findOrCreateCluster(clusterId, "user").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) {
+		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
+	};
+}
+//#endregion
+//#region composables/useChatHistory.ts
+/**
+* @description Chat history composable — multi-conversation management
+* @author 阿怪
+* @date 2026/5/7
+* @version v0.0.1
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+function generateId() {
+	return `conv-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function useChatHistory(options = {}) {
+	const storageKey = options.storageKey ?? "kine-ai-chat-history";
+	const conversations = ref([]);
+	const current = ref();
+	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 {}
+	}
+	load();
+	watch(conversations, persist, { deep: true });
+	function create(title) {
+		const now = Date.now();
+		const 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) {
+		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, title) {
+		const conv = conversations.value.find((c) => c.id === id);
+		if (conv) {
+			conv.title = title;
+			conv.updatedAt = Date.now();
+		}
+	}
+	function select(id) {
+		current.value = conversations.value.find((c) => c.id === id);
+	}
+	return {
+		conversations,
+		current,
+		create,
+		remove,
+		rename,
+		select
+	};
+}
+//#endregion
+//#region composables/createWebSocketTransport.ts
+function createWebSocketTransport() {
+	let ws = null;
+	let url = "";
+	let options = {};
+	let reconnectAttempts = 0;
+	let reconnectTimer = null;
+	const eventHandlers = [];
+	const statusHandlers = [];
+	function emitStatus(status) {
+		statusHandlers.forEach((h) => h(status));
+	}
+	function handleMessage(raw) {
+		try {
+			const event = JSON.parse(raw.data);
+			eventHandlers.forEach((h) => h(event));
+		} catch {}
+	}
+	function tryReconnect() {
+		if (!options.reconnect) return;
+		const max = options.maxReconnectAttempts ?? 5;
+		if (reconnectAttempts >= max) {
+			emitStatus("disconnected");
+			return;
+		}
+		reconnectAttempts++;
+		emitStatus("reconnecting");
+		const interval = options.reconnectInterval ?? 3e3;
+		reconnectTimer = setTimeout(() => connect(url, options), interval);
+	}
+	function connect(targetUrl, opts = {}) {
+		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) {
+		if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify(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
+* @author 阿怪
+* @date 2026/5/7
+* @version v0.0.1
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+var KMessageBubble = /* @__PURE__ */ defineComponent({
+	name: "KMessageBubble",
+	props: { message: {
+		type: Object,
+		required: true
+	} },
+	setup(props, { slots }) {
+		return () => {
+			const msg = props.message;
+			return createVNode("div", { "class": [
+				"k-message-bubble",
+				`k-message-bubble--${msg.role}`,
+				`k-message-bubble--${msg.status}`
+			] }, [createVNode("div", { "class": "k-message-bubble__content" }, [slots.default ? slots.default({ message: msg }) : msg.content])]);
+		};
+	}
+});
+//#endregion
+//#region components/KMessageCluster.tsx
+/**
+* @description Message cluster — groups fragmented messages from the same sender
+* @author 阿怪
+* @date 2026/5/7
+* @version v0.0.1
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+var KMessageCluster = /* @__PURE__ */ defineComponent({
+	name: "KMessageCluster",
+	props: { cluster: {
+		type: Object,
+		required: true
+	} },
+	setup(props) {
+		return () => createVNode("div", { "class": ["k-message-cluster", `k-message-cluster--${props.cluster.role}`] }, [props.cluster.messages.map((msg) => createVNode(KMessageBubble, {
+			"key": msg.id,
+			"message": msg
+		}, null))]);
+	}
+});
+//#endregion
+//#region components/KPhaseIndicator.tsx
+/**
+* @description Phase indicator — shows current chat phase with KLoading
+* @author 阿怪
+* @date 2026/5/7
+* @version v0.0.1
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+var PHASE_LABELS = {
+	idle: "",
+	aggregating: "正在输入…",
+	thinking: "思考中…",
+	streaming: "回复中…",
+	sending: "发送中…"
+};
+var KPhaseIndicator = /* @__PURE__ */ defineComponent({
+	name: "KPhaseIndicator",
+	props: { phase: {
+		type: String,
+		required: true
+	} },
+	setup(props) {
+		const label = computed(() => PHASE_LABELS[props.phase]);
+		const visible = computed(() => props.phase !== "idle");
+		return () => visible.value ? createVNode("div", { "class": ["k-phase-indicator", `k-phase-indicator--${props.phase}`] }, [createVNode(KLoading, { "size": "small" }, null), createVNode("span", null, [label.value])]) : null;
+	}
+});
+//#endregion
+//#region components/KChatPanel.tsx
+/**
+* @description Main chat panel — renders message clusters with phase indicator
+* @author 阿怪
+* @date 2026/5/7
+* @version v0.0.1
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+var KChatPanel = /* @__PURE__ */ defineComponent({
+	name: "KChatPanel",
+	props: {
+		clusters: {
+			type: Array,
+			required: true
+		},
+		phase: {
+			type: String,
+			default: "idle"
+		}
+	},
+	setup(props, { slots }) {
+		const scrollRef = ref();
+		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;
+			return last.messages[last.messages.length - 1]?.content.length ?? 0;
+		}, scrollToBottom);
+		return () => createVNode("div", { "class": "k-chat-panel" }, [createVNode("div", {
+			"class": "k-chat-panel__messages",
+			"ref": scrollRef
+		}, [props.clusters.map((cluster) => createVNode(KMessageCluster, {
+			"key": cluster.id,
+			"cluster": cluster
+		}, null)), slots.default?.()]), createVNode(KPhaseIndicator, { "phase": props.phase }, null)]);
+	}
+});
+//#endregion
+//#region components/KChatInput.tsx
+/**
+* @description Chat input — supports multi-line and Enter to send
+* @author 阿怪
+* @date 2026/5/7
+* @version v0.0.1
+*
+* 江湖的业务千篇一律，复杂的代码好几百行。
+*/
+var KChatInput = /* @__PURE__ */ 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) {
+			if (e.key === "Enter" && !e.shiftKey) {
+				e.preventDefault();
+				handleSend();
+			}
+		}
+		return () => createVNode("div", { "class": "k-chat-input" }, [createVNode("textarea", {
+			"class": "k-chat-input__textarea",
+			"value": text.value,
+			"onInput": (e) => {
+				text.value = e.target.value;
+			},
+			"onKeydown": handleKeydown,
+			"placeholder": props.placeholder,
+			"disabled": props.disabled,
+			"rows": 1
+		}, null), createVNode("button", {
+			"class": "k-chat-input__send",
+			"onClick": handleSend,
+			"disabled": props.disabled || !text.value.trim()
+		}, [createTextVNode("发送")])]);
+	}
+});
+//#endregion
+export { KChatInput, KChatPanel, KMessageBubble, KMessageCluster, KPhaseIndicator, createWebSocketTransport, useChat, useChatHistory };

package/dist/components/KChatInput.d.ts

@@ -0,0 +1,24 @@
+export declare const KChatInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "send"[], "send", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onSend?: ((...args: any[]) => any) | undefined;
+}>, {
+    placeholder: string;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/KChatPanel.d.ts

@@ -0,0 +1,23 @@
+import { PropType } from 'vue';
+import { MessageCluster, ChatPhase } from '../composables/types';
+export declare const KChatPanel: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    clusters: {
+        type: PropType<MessageCluster[]>;
+        required: true;
+    };
+    phase: {
+        type: PropType<ChatPhase>;
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    clusters: {
+        type: PropType<MessageCluster[]>;
+        required: true;
+    };
+    phase: {
+        type: PropType<ChatPhase>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    phase: ChatPhase;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/KMessageBubble.d.ts

@@ -0,0 +1,13 @@
+import { PropType } from 'vue';
+import { ChatMessage } from '../composables/types';
+export declare const KMessageBubble: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    message: {
+        type: PropType<ChatMessage>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    message: {
+        type: PropType<ChatMessage>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/KMessageCluster.d.ts

@@ -0,0 +1,13 @@
+import { PropType } from 'vue';
+import { MessageCluster } from '../composables/types';
+export declare const KMessageCluster: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    cluster: {
+        type: PropType<MessageCluster>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    cluster: {
+        type: PropType<MessageCluster>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/KPhaseIndicator.d.ts

@@ -0,0 +1,13 @@
+import { PropType } from 'vue';
+import { ChatPhase } from '../composables/types';
+export declare const KPhaseIndicator: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    phase: {
+        type: PropType<ChatPhase>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    phase: {
+        type: PropType<ChatPhase>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/composables/createWebSocketTransport.d.ts

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

package/dist/composables/types.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @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;
+}

package/dist/composables/useChat.d.ts

@@ -0,0 +1,2 @@
+import { UseChatOptions, UseChatReturn } from './types';
+export declare function useChat(options: UseChatOptions): UseChatReturn;

package/dist/composables/useChatHistory.d.ts

@@ -0,0 +1,2 @@
+import { UseChatHistoryOptions, UseChatHistoryReturn } from './types';
+export declare function useChatHistory(options?: UseChatHistoryOptions): UseChatHistoryReturn;

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @description @kine-design/ai-chat entry
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export { useChat } from './composables/useChat';
+export { useChatHistory } from './composables/useChatHistory';
+export { createWebSocketTransport } from './composables/createWebSocketTransport';
+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';
+export { KMessageBubble } from './components/KMessageBubble';
+export { KPhaseIndicator } from './components/KPhaseIndicator';
+export { KChatInput } from './components/KChatInput';

package/dist/vite.config.build.d.ts

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

package/index.ts

@@ -0,0 +1,39 @@
+/**
+ * @description @kine-design/ai-chat entry
+ * @author 阿怪
+ * @date 2026/5/7
+ * @version v0.0.1
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export { useChat } from './composables/useChat';
+export { useChatHistory } from './composables/useChatHistory';
+export { createWebSocketTransport } from './composables/createWebSocketTransport';
+
+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';
+export { KMessageBubble } from './components/KMessageBubble';
+export { KPhaseIndicator } from './components/KPhaseIndicator';
+export { KChatInput } from './components/KChatInput';