From bf74f0e2594dbad96caa1635f9c426b32e3c2323 Mon Sep 17 00:00:00 2001
From: 180079995 <101566121+180079995@users.noreply.github.com>
Date: Wed, 27 Nov 2024 00:07:57 +0800
Subject: [PATCH 1/3] discussion

---
 src/routes/+layout.svelte                     |  2 +-
 src/routes/join/+page.svelte                  | 19 +---
 src/routes/session/[id]/+page.svelte          | 33 ++++++-
 .../[id]/discussion/[userId]/+page.server.ts  | 30 ++++++
 .../[id]/discussion/[userId]/+page.svelte     | 91 +++++++++++++++++++
 5 files changed, 154 insertions(+), 21 deletions(-)
 create mode 100644 src/routes/session/[id]/discussion/[userId]/+page.server.ts
 create mode 100644 src/routes/session/[id]/discussion/[userId]/+page.svelte

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 888fa88..b5aeebd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -19,6 +19,6 @@
 	}
 
 	main.sidebar-open {
-		margin-left: 12.5rem; /* 側邊欄的寬度 */
+		margin-left: 12.5rem;
 	}
 </style>
diff --git a/src/routes/join/+page.svelte b/src/routes/join/+page.svelte
index 9250b24..0a3979c 100644
--- a/src/routes/join/+page.svelte
+++ b/src/routes/join/+page.svelte
@@ -40,22 +40,9 @@
 					bind:value={tempIdInput}
 					required
 					pattern="\d\{6}"
-					class="w-full rounded-lg border p-2"
+					class="w-full rounded-lg border p-2 font-bold"
 					placeholder="Enter 6-digit code"
 				/>
-
-				<label for="groupId" class="mb-2 block pt-3 font-medium">Group number</label>
-				<input
-					type="text"
-					id="groupId"
-					name="groupId"
-					bind:value={tempGroupInput}
-					required
-					pattern="\d\{1}"
-					class="w-full rounded-lg border p-2"
-					placeholder="Enter group number"
-				/>
-
 				{#if form?.idInvalid}
 					<p class="mt-1 text-sm text-red-600">Please enter a valid 6-digit code</p>
 				{/if}
@@ -73,10 +60,10 @@
 					required
 					pattern="^(?:[1-9]|[1-4][0-9]|50)$"
 					class="w-full rounded-lg border p-2"
-					placeholder="輸入組別"
+					placeholder="Please enter your group number"
 				/>
 				{#if form?.groupNumberInvalid}
-					<p class="mt-1 text-sm text-red-600">請輸入有效的組別</p>
+					<p class="mt-1 text-sm text-red-600">Please enter a valid group number</p>
 				{/if}
 			</div>
 
diff --git a/src/routes/session/[id]/+page.svelte b/src/routes/session/[id]/+page.svelte
index f5c59aa..e895d94 100644
--- a/src/routes/session/[id]/+page.svelte
+++ b/src/routes/session/[id]/+page.svelte
@@ -27,6 +27,11 @@
 		resources = resources.filter((_, i) => i !== index);
 	}
 
+	function generateNewTask() {
+		// Generate new task
+		console.log('New task generated');
+	}
+
 	removeResource(0);
 
 	function applyChanges(newtitle: string, resources: Array<{ type: string; content: string }>) {
@@ -87,19 +92,19 @@
 		<div class="items-center">
 			{#if editingTitle}
 				<div class="inline-block text-3xl font-bold">
+					<button onclick={confirmTitleChanges} class="h-1/2"><Check size={28} /></button>
 					<input
 						type="text"
 						id="inputTitle"
 						bind:value={newtitle}
 						class="inline-block rounded-lg border text-3xl"
 					/>
-					<button onclick={confirmTitleChanges} class="h-1/2"><Check size={28} /></button>
 				</div>
 			{:else}
-				<h1 class="inline-block text-3xl font-bold">{session.title}</h1>
 				{#if isHost}
 					<button onclick={() => (editingTitle = true)} class="h-1/2"><Pencil size={20} /></button>
 				{/if}
+				<h1 class="inline-block text-3xl font-bold">{session.title}</h1>
 				<br />
 			{/if}
 			<p class="mt-2 text-gray-600">Hosted by {session.hostName}</p>
@@ -253,7 +258,7 @@
 				{:else}
 					<div class="space-y-3">
 						{#each Object.entries(session.participants) as [userId, participant]}
-							<div class="flex items-center justify-between rounded-lg border p-3">
+							<div class="flex items-center justify-between rounded-lg border pl-3">
 								<div>
 									{#if !(userId === session.hostId) && isHost}
 										<button class="h-6"><CircleX size={20} /></button>
@@ -285,9 +290,29 @@
 					{:else if session.status === 'ended'}
 						This session has ended.
 					{:else}
-						Discussion in progress...
+						Now discussing...
 					{/if}
 				</p>
+				{#if session.status === 'active'}
+					<h1>Topic</h1>
+					<p class="rounded-lg bg-white p-4 shadow-lg">session.topic</p>
+					<div class="mt-4">
+						<button
+							class="mt-2 inline-block rounded-lg bg-blue-600 px-4 py-2 text-white"
+							onclick={generateNewTask}
+						>
+							generate new subtask
+						</button>
+					</div>
+					<!--
+					{#each session.topic.subtask as task}
+						<div class="mt-4">
+							<h2>Task</h2>
+							<p class="p-4 bg-white shadow-lg rounded-lg">{task}</p>
+						</div>
+					{/each}
+					-->
+				{/if}
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/session/[id]/discussion/[userId]/+page.server.ts b/src/routes/session/[id]/discussion/[userId]/+page.server.ts
new file mode 100644
index 0000000..05957fc
--- /dev/null
+++ b/src/routes/session/[id]/discussion/[userId]/+page.server.ts
@@ -0,0 +1,30 @@
+import { adminDb } from '$lib/server/firebase';
+import { redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from '../$types';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	if (!locals.user) {
+		throw redirect(303, '/login');
+	}
+
+	const sessionRef = adminDb.collection('discussion').doc(params.id);
+	console.log(sessionRef);
+	//const sessionDoc = await sessionRef.get();
+
+	/*
+	if (!sessionDoc.exists) {
+		throw error(404, 'User is not in the session');
+	}
+		*/
+
+	return {};
+};
+
+export const actions = {
+	default: async ({ locals }) => {
+		if (!locals.user) {
+			throw redirect(303, '/login');
+		}
+		//send message to the server
+	}
+} satisfies Actions;
diff --git a/src/routes/session/[id]/discussion/[userId]/+page.svelte b/src/routes/session/[id]/discussion/[userId]/+page.svelte
new file mode 100644
index 0000000..c636d83
--- /dev/null
+++ b/src/routes/session/[id]/discussion/[userId]/+page.svelte
@@ -0,0 +1,91 @@
+<script>
+	let messages = [{ sender: 'other', text: 'Hello! How can I assist you today?' }];
+	let inputText = '';
+
+	function sendMessage() {
+		if (inputText.trim() !== '') {
+			messages = [...messages, { sender: 'me', text: inputText }];
+			inputText = '';
+		}
+	}
+</script>
+
+<main class="mt-20 mt-auto">
+	<div class="chat-container">
+		<div class="messages">
+			{#each messages as message}
+				<div class="message {message.sender}">
+					<strong>{message.sender === 'me' ? 'You' : 'Support'}:</strong>
+					{message.text}
+				</div>
+			{/each}
+		</div>
+		<div class="input-area">
+			{#if messages[messages.length - 1].sender === 'me'}
+				<input type="text" bind:value={inputText} placeholder="Type your message..." />
+			{:else}
+				<input
+					type="text"
+					bind:value={inputText}
+					placeholder="Type your message..."
+					on:keyup={(e) => e.key === 'Enter' && sendMessage()}
+				/>
+			{/if}
+
+			<button
+				class="block rounded-lg"
+				disabled={messages[messages.length - 1].sender === 'me'}
+				on:click={sendMessage}>Send</button
+			>
+			{#if messages[messages.length - 1].sender === 'me'}
+				<div class="block">Please wait for a response...</div>
+			{/if}
+		</div>
+	</div>
+</main>
+
+<style>
+	.chat-container {
+		max-width: 80%;
+		margin: 0 auto;
+	}
+	.messages {
+		height: 400px;
+		overflow-y: auto;
+		border: 1px solid #ccc;
+		padding: 10px;
+	}
+	.message {
+		margin: 10px 0;
+	}
+	.message.me {
+		text-align: right;
+	}
+	.message.other {
+		text-align: left;
+	}
+	.input-area {
+		display: flex;
+		margin-top: 10px;
+	}
+	.input-area div {
+		display: block;
+	}
+	.input-area input {
+		flex: 1;
+		padding: 10px;
+	}
+	.input-area button {
+		padding: 10px;
+		display: block;
+	}
+	.input-area button:hover {
+		background-color: #f0f0f0;
+	}
+	.input-area button:active {
+		background-color: #e0e0e0;
+	}
+	.input-area button:disabled {
+		pointer-events: none;
+	}
+</style>

From a8208cad53b888bc996f2050373d17376157a9a1 Mon Sep 17 00:00:00 2001
From: 180079995 <101566121+180079995@users.noreply.github.com>
Date: Wed, 27 Nov 2024 00:30:30 +0800
Subject: [PATCH 2/3] Update +page.svelte

---
 .../[id]/discussion/[userId]/+page.svelte     | 37 ++++++++-----------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/routes/session/[id]/discussion/[userId]/+page.svelte b/src/routes/session/[id]/discussion/[userId]/+page.svelte
index c636d83..9c9afd6 100644
--- a/src/routes/session/[id]/discussion/[userId]/+page.svelte
+++ b/src/routes/session/[id]/discussion/[userId]/+page.svelte
@@ -3,6 +3,7 @@
 	let inputText = '';
 
 	function sendMessage() {
+		if (messages[messages.length - 1].sender === 'me') return;
 		if (inputText.trim() !== '') {
 			messages = [...messages, { sender: 'me', text: inputText }];
 			inputText = '';
@@ -10,7 +11,7 @@
 	}
 </script>
 
-<main class="mt-20 mt-auto">
+<main class="mt-20">
 	<div class="chat-container">
 		<div class="messages">
 			{#each messages as message}
@@ -21,24 +22,19 @@
 			{/each}
 		</div>
 		<div class="input-area">
-			{#if messages[messages.length - 1].sender === 'me'}
-				<input type="text" bind:value={inputText} placeholder="Type your message..." />
-			{:else}
-				<input
-					type="text"
-					bind:value={inputText}
-					placeholder="Type your message..."
-					on:keyup={(e) => e.key === 'Enter' && sendMessage()}
-				/>
-			{/if}
-
-			<button
-				class="block rounded-lg"
-				disabled={messages[messages.length - 1].sender === 'me'}
-				on:click={sendMessage}>Send</button
+			<input
+				class="inline-block"
+				type="text"
+				bind:value={inputText}
+				placeholder="Type your message..."
+				on:keyup={(e) => e.key === 'Enter' && sendMessage()}
+			/>
+			<button disabled={messages[messages.length - 1].sender === 'me'} on:click={sendMessage}
+				>Send</button
 			>
+			<div class="w-full"></div>
 			{#if messages[messages.length - 1].sender === 'me'}
-				<div class="block">Please wait for a response...</div>
+				<div>Please wait for a response...</div>
 			{/if}
 		</div>
 	</div>
@@ -65,11 +61,9 @@
 		text-align: left;
 	}
 	.input-area {
-		display: flex;
 		margin-top: 10px;
-	}
-	.input-area div {
-		display: block;
+		display: flex;
+		flex-wrap: wrap;
 	}
 	.input-area input {
 		flex: 1;
@@ -77,7 +71,6 @@
 	}
 	.input-area button {
 		padding: 10px;
-		display: block;
 	}
 	.input-area button:hover {
 		background-color: #f0f0f0;

From d504394fe8742cd800cd239ee86dd9c8bb7648fc Mon Sep 17 00:00:00 2001
From: 180079995 <101566121+180079995@users.noreply.github.com>
Date: Wed, 27 Nov 2024 22:32:35 +0800
Subject: [PATCH 3/3] Update +page.svelte

---
 .../[id]/discussion/[userId]/+page.svelte     | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/routes/session/[id]/discussion/[userId]/+page.svelte b/src/routes/session/[id]/discussion/[userId]/+page.svelte
index 9c9afd6..fbebc62 100644
--- a/src/routes/session/[id]/discussion/[userId]/+page.svelte
+++ b/src/routes/session/[id]/discussion/[userId]/+page.svelte
@@ -1,6 +1,7 @@
 <script>
-	let messages = [{ sender: 'other', text: 'Hello! How can I assist you today?' }];
+	let messages = [{ sender: 'Support', text: 'Hello! How can I assist you today?' }];
 	let inputText = '';
+	//import { User } from 'lucide-svelte'
 
 	function sendMessage() {
 		if (messages[messages.length - 1].sender === 'me') return;
@@ -15,9 +16,16 @@
 	<div class="chat-container">
 		<div class="messages">
 			{#each messages as message}
-				<div class="message {message.sender}">
-					<strong>{message.sender === 'me' ? 'You' : 'Support'}:</strong>
+				<div class="message" class:me={message.sender === 'me'}>
+					<!--<User class="inline-block"/>-->
+					{#if message.sender !== 'me'}
+						<img src={message.avatar} alt="Avatar" class="avatar left" />
+					{/if}
+					<p class="font-bold">{message.sender === 'me' ? 'You' : message.sender}:</p>
 					{message.text}
+					{#if message.sender === 'me'}
+						<img src={message.avatar} alt="Avatar" class="avatar right" />
+					{/if}
 				</div>
 			{/each}
 		</div>
@@ -53,13 +61,11 @@
 	}
 	.message {
 		margin: 10px 0;
+		text-align: left;
 	}
 	.message.me {
 		text-align: right;
 	}
-	.message.other {
-		text-align: left;
-	}
 	.input-area {
 		margin-top: 10px;
 		display: flex;
@@ -81,4 +87,16 @@
 	.input-area button:disabled {
 		pointer-events: none;
 	}
+	.avatar {
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		margin: 0 10px;
+	}
+	.avatar.left {
+		order: -1;
+	}
+	.avatar.right {
+		order: 1;
+	}
 </style>