Mercurial

annotate love/epi/src/hooks/useChat.ts @ 71:75de5903355c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Giagantic changes that update Dowa library to be more align with stb style array and hashmap. Updated Seobeo to be caching on server side instead of file level caching. Deleted bunch of things I don't really use.
author June Park <parkjune1995@gmail.com>
date Sun, 28 Dec 2025 20:34:22 -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 { useAtom, useSetAtom } from 'jotai';
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 { useCallback, useEffect, useMemo, useRef, useState } 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 import { messagesAtom, addMessageAtom, updateChatTitleAtom } from '@/atoms/chatAtoms';
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 import { sendMessageChatId, subscribeToChat } from '@/hooks/useChatWebsocket';
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 import type { Payload } from '@/hooks/useChatWebsocket';
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 import { useComposer } from './useComposer';
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 export function useChat(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 const [isLoading, setIsLoading] = useState<boolean>(false);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 const messagesAtomForChat = useMemo(() => messagesAtom(chatId), [chatId]);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 const [messages, setMessages] = useAtom(messagesAtomForChat);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 const { setIdle } = useComposer();
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 const addMessage = useSetAtom(addMessageAtom);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 const updateChatTitle = useSetAtom(updateChatTitleAtom);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 const streamingMessageIdRef = useRef<string | null>(null);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 useEffect(() => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 const unsubscribe = subscribeToChat(chatId, (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 if (payload.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
24 setIdle();
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 streamingMessageIdRef.current = null;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 return;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 if (payload.action === 'title_updated' && streamingMessageIdRef.current) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 updateChatTitle({ chatId, title: payload.title });
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 }
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 (payload.action === 'image' && payload.url && streamingMessageIdRef.current) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 setMessages(prev =>
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 prev.map(m =>
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 m.id === streamingMessageIdRef.current
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 ? { ...m, image_url: payload.url }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 : m,
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 ),
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 );
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 if (payload.action === 'append' && payload.content && streamingMessageIdRef.current) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 setMessages(prev =>
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 prev.map(m =>
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 m.id === streamingMessageIdRef.current
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 ? { ...m, content: m.content + payload.content }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 : m,
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 );
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 });
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 return unsubscribe;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 }, [chatId, setIdle, setMessages]);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 const sendUserMessage = useCallback(
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 (content: string, overrideChatID?: string) => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 if (!(chatId || overrideChatID) || !content.trim()) return;
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 const effectiveChatId = (chatId === 'new' || !chatId) && overrideChatID ? overrideChatID : chatId;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 addMessage({
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 chatId: effectiveChatId,
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 message: { role: 'user', content: content.trim(), type: 'text' },
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 });
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 const id = crypto.randomUUID();
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 streamingMessageIdRef.current = id;
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 addMessage({
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 chatId: effectiveChatId,
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 message: { id, role: 'assistant', content: '', type: 'text' },
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
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 sendMessageChatId(content, effectiveChatId);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 },
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 [chatId, addMessage],
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 );
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 const stopStreaming = useCallback(() => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 setIsLoading(false);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 streamingMessageIdRef.current = null;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 }, []);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 return {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87 messages: messages ?? [],
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 sendUserMessage,
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 setMessages,
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 isLoading,
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 stopStreaming,
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 }