Skip to content

Commit

Permalink
feat: add sample chat page
Browse files Browse the repository at this point in the history
  • Loading branch information
howard9199 committed Nov 24, 2024
1 parent 2652466 commit c0398b7
Showing 1 changed file with 64 additions and 0 deletions.
64 changes: 64 additions & 0 deletions src/routes/chat/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<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>

<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">
<input
type="text"
bind:value={inputText}
placeholder="Type your message..."
on:keyup={(e) => e.key === 'Enter' && sendMessage()}
/>
<button on:click={sendMessage}>Send</button>
</div>
</div>

<style>
.chat-container {
max-width: 600px;
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 input {
flex: 1;
padding: 10px;
}
.input-area button {
padding: 10px;
}
</style>

0 comments on commit c0398b7

Please sign in to comment.