Mercurial

annotate love/epi/src/components/ChatUI/ChatUI.tsx @ 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 { MessageContainer } from './MessageContainer';
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 { Composer } from './Composer';
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 { useChat } from '@/hooks/useChat';
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 import { useEffect, 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
5 import { apiUrl } 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
6 import { currentChatId } 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
7 import { useAtom } 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
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 ChatUI({ chatId }: {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 [loading, setLoading] = useState(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 const { messages, setMessages } = useChat(chatId);
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 scrollRef = useRef<HTMLDivElement>(null);
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 setCurrentChatId = useAtom(currentChatId)[1];
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 setCurrentChatId(chatId);
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 // Ignore warning since I want to render once.
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 useEffect(() => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 const loadHistory = async () => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 if (!chatId || chatId === 'new') return;
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 setLoading(true);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 try {
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 res = await fetch(apiUrl(`/chats/${chatId}/messages`));
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 (!res.ok) throw new Error(`HTTP ${res.status}`);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 const data = await res.json();
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 if (data.messages.length > 0) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 setMessages(data.messages);
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 } catch (err) {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 console.error('Error from loading history: ', err);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 setMessages([]);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 } finally {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 setLoading(false);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 }
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 };
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 console.log('loadhistory');
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 loadHistory();
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 }, [chatId]);
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 useEffect(() => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 // This is not ideal, but couldnt' get CSS to work.
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 timer = setTimeout(() => {
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 scrollRef.current?.scrollTo({
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 top: scrollRef.current.scrollHeight,
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 behavior: 'smooth',
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 }, 100);
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 return () => clearTimeout(timer);
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 }, [messages]);
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 return (
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 <div className="flex flex-col bg-gray-100 dark:bg-black h-screen">
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 <div
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 ref={scrollRef}
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 className="flex-1 overflow-y-scroll"
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 {loading && (
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 <div className="flex justify-center items-center h-full">
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 <span>Loading messages...</span>
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 </div>
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 <MessageContainer 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
63 </div>
cf9caa4abc3e [Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 <Composer 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
65 </div>
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 }