Mercurial

annotate love/epi/src/hooks/useChatWebsocket.ts @ 139:e8f693bece90

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
test again
author June Park <parkjune1995@gmail.com>
date Fri, 09 Jan 2026 12:29:20 -0800
parents cf9caa4abc3e
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
38
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 import { wsUrl } from '@/utils';
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 import { useEffect } from 'react';
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 export type Payload = {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 chatId: string;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 content: string;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 action: 'append' | 'done';
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 } | {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 chatId: string;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 title: string;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 action:'title_updated';
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 } | {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 chatId: string;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 url: string;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 action:'image';
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 export type OnMessage = (payload: Payload) => void;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 type WebSocketEvent = {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 chatId: string;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 payload: Payload;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 };
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 // TODO: Make this into class so we can mock for test.
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 const wsSingleton = new Map<string, WebSocket>();
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 const listeners = new Map<string, Set<OnMessage>>();
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 const pendingMessages = new Map<string, Array<{ content: string; resolve: () => void }>>();
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 function getOrCreateWebSocket(chatId: string): WebSocket {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 let ws = wsSingleton.get(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 return ws;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 ws = new WebSocket(wsUrl(`/chats/${chatId}/ws`));
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 ws.onopen = () => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 console.log(`[WS] Connected for chat ${chatId}`);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 const queue = pendingMessages.get(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 if (queue) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 queue.forEach(({ content }) => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 ws!.send(JSON.stringify({ role: 'user', content }));
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 });
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 pendingMessages.delete(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 };
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 // ADD IT HERE:
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 ws.onmessage = (event) => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 const payload = JSON.parse(event.data);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 console.log('[WS] Received message:', payload);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 wsEventTarget.dispatchEvent(
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 new CustomEvent('message', {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 detail: { chatId, payload },
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 }),
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 );
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 };
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62 ws.onerror = (error) => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 console.error(`[WS] Error for chat ${chatId}:`, error);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 };
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 ws.onclose = () => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 console.log(`[WS] Closed for chat ${chatId}`);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 wsSingleton.delete(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 };
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 wsSingleton.set(chatId, ws);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 return ws;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 // TODO: This could be not done rather cancel?
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 export function broadcastDone(chatId: string) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 const set = listeners.get(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 // TODO: This does not update the histroy to be canceled on so there is decrepency but it should be fine for now.
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 if (set) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 set.forEach((cb) => cb({ chatId, content: '', action: 'done' }));
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 export function useChatWebSocket(
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 chatId: string | null,
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 onMessage: OnMessage,
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87 onLoadingChange: (loading: boolean) => void,
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 ) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 useEffect(() => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 if (!chatId) return;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 // Only register listener to given chatId as chatId websocket has not been made yet.
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 let set = listeners.get(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 if (!set) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 set = new Set();
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 listeners.set(chatId, set);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 set.add(onMessage);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 return () => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 if (!chatId) return;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 const set = listeners.get(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104 if (set) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 set.delete(onMessage);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106 if (set.size === 0) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107 listeners.delete(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108 const ws = wsSingleton.get(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
109 if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
110 ws.close();
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
111 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
112 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
113 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
114 };
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
115 }, [chatId, onMessage]);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
116
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
117 const sendMessage = (content: string) => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
118 if (!chatId) return;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
119
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
120 const ws = getOrCreateWebSocket(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
121
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
122 onLoadingChange(true);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
123
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
124 if (ws.readyState === WebSocket.OPEN) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
125 ws.send(JSON.stringify({ role: 'user', content }));
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
126 } else if (ws.readyState === WebSocket.CONNECTING) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
127 // Queue message until open
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
128 let queue = pendingMessages.get(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
129 if (!queue) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
130 queue = [];
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
131 pendingMessages.set(chatId, queue);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
132 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
133 console.log('Queue: ', queue);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
134 if (queue.length > 1) return;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
135 queue.push({ content, resolve: () => {} });
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
136 } else {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
137 console.warn('[WS] WebSocket not in usable state', ws.readyState);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
138 onLoadingChange(false);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
139 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
140 };
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
141
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
142 return { sendMessage };
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
143 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
144
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
145 const wsEventTarget = new EventTarget();
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
146
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
147 export function subscribeToChat(chatId: string, callback: (payload: Payload) => void) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
148 const handler = (event: Event) => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
149 const { chatId: eventChatId, payload } = (event as CustomEvent<WebSocketEvent>).detail;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
150 if (eventChatId === chatId) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
151 callback(payload);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
152 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
153 };
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
154
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
155 wsEventTarget.addEventListener('message', handler);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
156
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
157 return () => wsEventTarget.removeEventListener('message', handler);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
158 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
159
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
160 export function sendMessageChatId(content: string, chatId: string): void {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
161 if (!content.trim() || !chatId) return;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
162
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
163 const ws = getOrCreateWebSocket(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
164
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
165 if (ws.readyState === WebSocket.OPEN) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
166 ws.send(JSON.stringify({ role: 'user', content }));
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
167 } else if (ws.readyState === WebSocket.CONNECTING) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
168 let queue = pendingMessages.get(chatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
169 if (!queue) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
170 queue = [];
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
171 pendingMessages.set(chatId, queue);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
172 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
173 if (!queue.some(m => m.content === content)) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
174 queue.push({ content, resolve: () => {} });
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
175 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
176 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
177 }