annotate react_games/src/current.tsx @ 203:92a57bd716c1

removed unused file
author MrJuneJune <me@mrjunejune.com>
date Sun, 15 Feb 2026 09:13:09 -0800
parents 829623189a57
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
1 import { CSSProperties, useReducer, useState, useRef, useEffect } from "react";
37
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 import ReactDOM from "react-dom/client";
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
4 /**
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
5 * CONFIGURATION
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
6 * Replace this with your actual API key or fetch it from an environment variable.
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
7 */
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
8 const OPENAI_API_KEY = "YOUR_OPENAI_API_KEY_HERE";
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
9
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
10 interface ChatStyle {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
11 mainContainer: CSSProperties;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
12 sideBar: CSSProperties;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
13 sideBarItem: CSSProperties; // Added for hover/layout
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
14 mainChat: CSSProperties;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
15 mainMessage: CSSProperties;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
16 messageBubble: CSSProperties; // Added for styling messages
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
17 inputBar: CSSProperties;
37
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 }
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
20 const STYLES: ChatStyle = {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
21 mainContainer: {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
22 display: "flex",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
23 backgroundColor: "#1e1e1e",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
24 color: "white",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
25 fontFamily: "sans-serif",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
26 height: "100vh",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
27 margin: 0,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
28 },
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
29 sideBar: {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
30 width: "250px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
31 height: "100vh",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
32 overflowY: "auto",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
33 backgroundColor: "#000000",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
34 borderRight: "1px solid #333",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
35 padding: "1rem",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
36 },
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
37 sideBarItem: {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
38 padding: "10px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
39 cursor: "pointer",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
40 backgroundColor: "#333",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
41 marginBottom: "5px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
42 borderRadius: "5px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
43 whiteSpace: "nowrap",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
44 overflow: "hidden",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
45 textOverflow: "ellipsis",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
46 },
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
47 mainChat: {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
48 flex: 1,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
49 display: "flex",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
50 flexDirection: "column",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
51 backgroundColor: "#343541",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
52 height: "100vh",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
53 },
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
54 mainMessage: {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
55 flex: 1,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
56 padding: "20px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
57 overflowY: "auto",
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
58 display: "flex",
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
59 flexDirection: "column",
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
60 gap: "15px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
61 },
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
62 messageBubble: {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
63 padding: "15px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
64 borderRadius: "8px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
65 lineHeight: "1.5",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
66 maxWidth: "800px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
67 margin: "0 auto",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
68 width: "100%",
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
69 },
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
70 inputBar: {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
71 width: "100%",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
72 height: "100px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
73 padding: "15px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
74 backgroundColor: "#40414f",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
75 color: "white",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
76 border: "none",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
77 borderTop: "1px solid #555",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
78 fontSize: "16px",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
79 resize: "none",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
80 outline: "none",
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
81 },
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
82 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
83
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
84 type Chat = {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
85 id: string;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
86 title: string;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
87 createdAt: number;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
88 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
89
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
90 type ChatHistory = Chat[];
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
91
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
92 type Message = {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
93 id: string;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
94 role: 'user' | 'assistant'; // Changed from 'author' to match OpenAI spec usually
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
95 content: string; // Changed from 'message' to 'content'
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
96 createdAt: number;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
97 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
98
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
99 type MainPage = {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
100 activeChatId: string | null;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
101 chatHistory: ChatHistory;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
102 currentMessages: Message[];
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
103 allChats: Record<string, Message[]>;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
104 sendMessageStatus: 'idle' | 'inProgress' | 'failed' | 'success';
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
105 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
106
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
107 // Expanded Actions
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
108 type MainPageAction =
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
109 | { type: 'select_chat'; payload: { chatId: string } }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
110 | { type: 'user_message_sent'; payload: { content: string; newChatId?: string } }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
111 | { type: 'api_response_received'; payload: { content: string } }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
112 | { type: 'api_error'; payload: { error: string } };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
113
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
114 function mainPageDispatch(state: MainPage, action: MainPageAction): MainPage {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
115 switch (action.type) {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
116 case 'select_chat': {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
117 const { chatId } = action.payload;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
118 return {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
119 ...state,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
120 activeChatId: chatId,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
121 currentMessages: state.allChats[chatId] || [],
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
122 sendMessageStatus: 'idle',
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
123 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
124 }
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
125
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
126 case 'user_message_sent': {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
127 const { content, newChatId } = action.payload;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
128
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
129 const newMessage: Message = {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
130 id: Date.now().toString(),
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
131 role: 'user',
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
132 content: content,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
133 createdAt: Date.now(),
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
134 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
135
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
136 // If we are starting a brand new chat (no active ID)
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
137 if (newChatId && !state.activeChatId) {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
138 const newChatMetadata: Chat = {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
139 id: newChatId,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
140 title: content.substring(0, 30) + (content.length > 30 ? "..." : ""),
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
141 createdAt: Date.now()
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
142 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
143
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
144 return {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
145 ...state,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
146 activeChatId: newChatId,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
147 sendMessageStatus: 'inProgress',
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
148 chatHistory: [newChatMetadata, ...state.chatHistory],
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
149 currentMessages: [newMessage],
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
150 allChats: {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
151 ...state.allChats,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
152 [newChatId]: [newMessage]
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
153 }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
154 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
155 }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
156
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
157 const chatId = state.activeChatId!;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
158 const updatedMessages = [...state.currentMessages, newMessage];
37
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
159
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
160 return {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
161 ...state,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
162 sendMessageStatus: 'inProgress',
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
163 currentMessages: updatedMessages,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
164 allChats: {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
165 ...state.allChats,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
166 [chatId]: updatedMessages
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
167 }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
168 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
169 }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
170
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
171 case 'api_response_received': {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
172 if (!state.activeChatId) return state;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
173
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
174 const newMsg: Message = {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
175 id: Date.now().toString(),
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
176 role: 'assistant',
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
177 content: action.payload.content,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
178 createdAt: Date.now()
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
179 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
180
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
181 const updatedMessages = [...state.currentMessages, newMsg];
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
182
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
183 return {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
184 ...state,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
185 sendMessageStatus: 'success',
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
186 currentMessages: updatedMessages,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
187 allChats: {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
188 ...state.allChats,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
189 [state.activeChatId]: updatedMessages
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
190 }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
191 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
192 }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
193
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
194 case 'api_error': {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
195 return {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
196 ...state,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
197 sendMessageStatus: 'failed'
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
198 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
199 }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
200
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
201 default:
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
202 return state;
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
203 }
37
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
204 }
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
205
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
206 const initialMainPage: MainPage = {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
207 activeChatId: null,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
208 chatHistory: [],
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
209 currentMessages: [],
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
210 allChats: {},
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
211 sendMessageStatus: 'idle'
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
212 };
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
213
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
214
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
215 async function fetchOpenAICompletion(messages: Message[]) {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
216 const apiMessages = messages.map(m => ({
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
217 role: m.role,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
218 content: m.content
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
219 }));
37
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
220
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
221 try {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
222 const response = await fetch("https://api.openai.com/v1/chat/completions", {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
223 method: "POST",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
224 headers: {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
225 "Content-Type": "application/json",
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
226 "Authorization": `Bearer ${OPENAI_API_KEY}`
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
227 },
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
228 body: JSON.stringify({
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
229 model: "gpt-3.5-turbo", // or gpt-4
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
230 messages: apiMessages,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
231 })
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
232 });
37
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
233
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
234 if (!response.ok) {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
235 throw new Error(`API Error: ${response.statusText}`);
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
236 }
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
237
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
238 const data = await response.json();
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
239 return data.choices[0].message.content;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
240 } catch (error) {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
241 console.error(error);
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
242 throw error;
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
243 }
37
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
244 }
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
245
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
246 function Current() {
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
247 const [state, dispatch] = useReducer(mainPageDispatch, initialMainPage);
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
248 const [inputValue, setInputValue] = useState("");
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
249 const messagesEndRef = useRef<HTMLDivElement>(null);
37
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
250
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
251 // Auto-scroll to bottom when messages change
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
252 useEffect(() => {
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
253 messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
254 }, [state.currentMessages]);
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
255
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
256 const handleSendMessage = async () => {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
257 if (!inputValue.trim()) return;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
258
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
259 // 1. Determine if this is a new chat or existing
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
260 const isNewChat = !state.activeChatId;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
261 const currentChatId = state.activeChatId || crypto.randomUUID(); // Generate ID for new chat
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
262
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
263 const textToSend = inputValue;
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
264 setInputValue(""); // Clear input immediately
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
265
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
266 // 2. Dispatch User Message (Optimistic UI)
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
267 dispatch({
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
268 type: 'user_message_sent',
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
269 payload: { content: textToSend, newChatId: isNewChat ? currentChatId : undefined }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
270 });
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
271
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
272 try {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
273 // 3. Prepare context (include previous messages + new one)
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
274 // Note: We reconstruct the array here because state update is async and might not be ready
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
275 const contextMessages: Message[] = [
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
276 ...(isNewChat ? [] : state.currentMessages),
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
277 { id: 'temp', role: 'user', content: textToSend, createdAt: Date.now() }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
278 ];
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
279
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
280 // 4. Call API
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
281 const aiResponse = await fetchOpenAICompletion(contextMessages);
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
282
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
283 // 5. Dispatch Success
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
284 dispatch({ type: 'api_response_received', payload: { content: aiResponse } });
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
285
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
286 } catch (error) {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
287 dispatch({ type: 'api_error', payload: { error: 'Failed to fetch' } });
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
288 alert("Failed to connect to OpenAI. Check API Key.");
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
289 }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
290 };
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
291
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
292 const handleKeyDown = (e: React.KeyboardEvent) => {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
293 if (e.key === 'Enter' && !e.shiftKey) {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
294 e.preventDefault();
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
295 handleSendMessage();
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
296 }
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
297 };
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
298
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
299 return (
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
300 <div style={STYLES.mainContainer}>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
301 {/* Sidebar */}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
302 <div style={STYLES.sideBar}>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
303 <h3 style={{color: '#ececf1', marginBottom: '20px'}}>History</h3>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
304 <div
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
305 style={{...STYLES.sideBarItem, border: '1px dashed #555'}}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
306 onClick={() => {
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
307 // Reset to empty view for a new chat
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
308 // We can achieve this by setting activeChatId to null locally if we wanted
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
309 // But for this simple reducer, we can just reload the page or add a 'reset' action.
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
310 // For now, let's just allow clicking existing ones.
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
311 window.location.reload();
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
312 }}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
313 >
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
314 + New Chat
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
315 </div>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
316
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
317 {state.chatHistory.map((hist) => (
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
318 <div
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
319 key={hist.id}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
320 style={{
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
321 ...STYLES.sideBarItem,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
322 backgroundColor: state.activeChatId === hist.id ? '#555' : '#333'
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
323 }}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
324 onClick={() => dispatch({ type: 'select_chat', payload: { chatId: hist.id } })}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
325 >
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
326 {hist.title}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
327 </div>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
328 ))}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
329 </div>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
330
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
331 {/* Main Chat Area */}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
332 <div style={STYLES.mainChat}>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
333 <div style={STYLES.mainMessage}>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
334 {state.currentMessages.length === 0 && (
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
335 <div style={{color: '#666', textAlign: 'center', marginTop: '40%'}}>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
336 Send a message to start...
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
337 </div>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
338 )}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
339
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
340 {state.currentMessages.map((msg) => (
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
341 <div
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
342 key={msg.id}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
343 style={{
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
344 ...STYLES.messageBubble,
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
345 backgroundColor: msg.role === 'assistant' ? '#444654' : 'transparent'
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
346 }}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
347 >
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
348 <strong style={{color: msg.role === 'assistant' ? '#10a37f' : '#ececf1'}}>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
349 {msg.role === 'assistant' ? 'AI' : 'You'}:
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
350 </strong>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
351 <div style={{whiteSpace: 'pre-wrap', marginTop: '5px'}}>{msg.content}</div>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
352 </div>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
353 ))}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
354
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
355 {state.sendMessageStatus === 'inProgress' && (
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
356 <div style={{...STYLES.messageBubble, color: '#888'}}>AI is typing...</div>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
357 )}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
358 <div ref={messagesEndRef} />
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
359 </div>
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
360
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
361 {/* Input Area */}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
362 <textarea
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
363 style={STYLES.inputBar}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
364 placeholder="Send a message..."
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
365 value={inputValue}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
366 onChange={(e) => setInputValue(e.target.value)}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
367 onKeyDown={handleKeyDown}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
368 disabled={state.sendMessageStatus === 'inProgress'}
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
369 />
44
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
370 </div>
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
371 </div>
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
372 );
0cfd7d9277b0 [ReactGame] 2048
MrJuneJune <me@mrjunejune.com>
parents: 37
diff changeset
373 }
37
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
374
fb9bcd3145cb [ReactGames] Few games I made using react just to practice few things.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
375 ReactDOM.createRoot(document.getElementById("root")!).render(<Current />);
47
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
376
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
377
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
378 https://www.linkedin.com/in/drakewong/
829623189a57 [Gara] Android commit. Bazelfied it.
MrJuneJune <me@mrjunejune.com>
parents: 44
diff changeset
379 https://www.linkedin.com/in/dmitry-manannikov/