/home/mrjunejune/zenbu: react_games/src/current.tsx annotate

annotate react_games/src/current.tsx @ 135:ffb764d2fcc5

[HgWeb] Updated hg web so it works

author	June Park <parkjune1995@gmail.com>
date	Fri, 09 Jan 2026 11:17:20 -0800
parents	829623189a57
children

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/

Mercurial

annotate react_games/src/current.tsx @ 135:ffb764d2fcc5