fixed ui layout and integrated starting new chat session

frontend/src/index.sass

@@ -116,6 +116,7 @@ h1
   justify-content: space-around
   padding: 10px
   color: $c-default-icon
+  background-color: white
 
 .navbar-item
   text-decoration: none

frontend/src/logic/sdk.ts

@@ -6,6 +6,8 @@ import Japanese from '../assets/img/lang/ja.svg'
 // db.user: Current logged-in user
 const db = localStorage
 
+const backendUrl = 'https://localhost:8000'
+
 export interface Lang {
   name: string
   code: string
@@ -26,6 +28,8 @@ export function signup(username: string, password: string, language: string)
 
   users[username] = {password, language}
   db.users = JSON.stringify(users)
+
+  db.user = username
 }
 
 export function login(username: string, password: string)
@@ -46,3 +50,70 @@ export function isLoggedIn()
 {
   return !!db.user
 }
+
+export function getLanguage(username: string)
+{
+  const users = JSON.parse(db.users)
+  return users[username].language
+}
+
+export function getUsername()
+{
+  return db.user
+}
+
+ async function post(endpoint: string, body: any) {
+  const response = await fetch(`${backendUrl}/${endpoint}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(body),
+  });
+
+  return response;
+
+ }
+
+export interface CharacterChatCreationRequest 
+{
+  character: string;
+  user_name: string;
+  language: string;
+}
+
+export interface CharacterChatCreationResponse 
+{
+  // this shoudl be of type UUID
+  chat_id: string;
+}
+
+export async function startFictionalChat(character: string): Promise<CharacterChatCreationResponse> {
+  const currUser = getUsername();
+  const language = getLanguage(currUser);
+  
+  const request: CharacterChatCreationRequest = {
+    character: character,
+    user_name: currUser,
+    language: language
+  };
+
+  console.log('Sending request:', request);
+  
+  const response = await fetch(`${backendUrl}/character-chat`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(request),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json();
+    throw new Error(`HTTP error! status: ${response.status}, message: ${errorData.message}`);
+  }
+
+  return await response.json();
+}
+
+// export interface 

frontend/src/pages/Character.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react';
 export default function Character() {
     const location = useLocation();
     const navigate = useNavigate();
-    const { name, image } = location.state;
+    const { name, image , sessionId } = location.state;
 
     const [messages, setMessages] = useState([
         { text: 'Hello!', sender: 'me' },
@@ -15,7 +15,8 @@ export default function Character() {
     ]);
 
     function handleRecord() {
-        // handle the recording
+        console.log("Recording...");
+        console.log(sessionId)
     }
 
     return (

frontend/src/pages/CharacterSelection.tsx

@@ -3,35 +3,35 @@ import Ash from "../assets/img/ash.png"
 import C3PO from "../assets/img/c3po.png"
 import { useNavigate } from "react-router-dom"
 import CharacterBadge from "../components/CharacterBadge"
+import { startFictionalChat } from "../logic/sdk"
 
 export default function CharacterSelection() {
     const navigate = useNavigate();
 
     const characters = [
-        { name: 'Ash', image: Ash },
-        { name: 'C3PO', image: C3PO },
+        { name: 'Ash', image: Ash, alias: 'ash_pokemon'},
+        { name: 'C3PO', image: C3PO, alias: 'c3po_starwars'},
         // Add more characters here
     ];
 
-    const startSession = () => {
-        // Start a session with the selected character
-    }
+    const handleCharacterClick = (characterName: string, characterImage: string, alias: string) => {
 
-    const handleCharacterClick = (characterName: string, characterImage: string) => {
-        navigate('/character', { state: { name: characterName, image: characterImage } });
+        startFictionalChat(alias).then((sessionId) => {
+            navigate('/character', { state: { name: characterName, image: characterImage, sessionId: sessionId } });
+        })
     }
 
     return (
-        <div >
+        <div className="flex flex-col items-center justify-center">
             <div className="v-layout p-10">
                 <h1 className="text-center">Talk With...</h1>
-                <div className="grid grid-cols-2 gap-3">
+                <div className="flex flex-wrap justify-center gap-3">
                     {characters.map(character => (
                         <CharacterBadge 
                             key={character.name}
                             name={character.name} 
                             image={character.image} 
-                            onClick={() => handleCharacterClick(character.name, character.image)} 
+                            onClick={() => handleCharacterClick(character.name, character.image, character.alias)} 
                         />
                     ))}
                 </div>