55 lines
1.4 KiB
Svelte
55 lines
1.4 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import {chatMessagesStore, chatInputFocusStore} from "../../Stores/ChatStore";
|
||
|
|
|
||
|
|
let newMessageText = '';
|
||
|
|
|
||
|
|
function onFocus() {
|
||
|
|
chatInputFocusStore.set(true);
|
||
|
|
}
|
||
|
|
function onBlur() {
|
||
|
|
chatInputFocusStore.set(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
function saveMessage() {
|
||
|
|
if (!newMessageText) return;
|
||
|
|
chatMessagesStore.addPersonnalMessage(newMessageText);
|
||
|
|
newMessageText = '';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<form on:submit|preventDefault={saveMessage}>
|
||
|
|
<input type="text" bind:value={newMessageText} placeholder="Type here" on:focus={onFocus} on:blur={onBlur} >
|
||
|
|
<button type="submit">
|
||
|
|
<img src="/static/images/send.png" alt="Send" width="20">
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
form {
|
||
|
|
display: flex;
|
||
|
|
padding-left: 4px;
|
||
|
|
padding-right: 4px;
|
||
|
|
|
||
|
|
input {
|
||
|
|
flex: auto;
|
||
|
|
background-color: #42464d;
|
||
|
|
color: white;
|
||
|
|
border-bottom-left-radius: 4px;
|
||
|
|
border-top-left-radius: 4px;
|
||
|
|
border: none;
|
||
|
|
font-size: 22px;
|
||
|
|
font-family: Whiteney;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
background-color: #42464d;
|
||
|
|
color: white;
|
||
|
|
border-bottom-right-radius: 4px;
|
||
|
|
border-top-right-radius: 4px;
|
||
|
|
border: none;
|
||
|
|
border-left: solid black 1px;
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: Whiteney;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|