Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add visual chat

Browse Source
This commit is contained in:
ernstmul
2025-04-02 14:56:00 +02:00
parent 5dbef2273a
commit a201bbb2ed
1 changed files with 54 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat.svelte
+54 -21
View File
@@ -1,6 +1,6 @@
<script>
import { Divider, Card, Typography, Layout, Button, Icon } from '@appwrite.io/pink-svelte';
import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
import { IconArrowUp, IconChevronLeft, IconPaperClip } from '@appwrite.io/pink-icons-svelte';
export let showChat;
</script>
@@ -8,27 +8,43 @@
<section class="chat" class:is-visible={showChat}>
<Card.Base>
<div class="chat-content">
<Layout.Stack height="calc(100vh - 120px)">
<Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography.Text>Chat</Typography.Text>
<button
on:click={() => {
showChat = false;
}}>
<Icon icon={IconChevronLeft} />
</button>
</Layout.Stack>
<Layout.Stack height="calc(100vh - 120px)" justifyContent="space-between">
<Layout.Stack gap="s">
<Layout.Stack
direction="row"
justifyContent="space-between"
alignItems="center">
<Typography.Text>Chat</Typography.Text>
<Button.Button
icon
variant="secondary"
size="s"
on:click={() => {
showChat = false;
}}
><Icon
icon={IconChevronLeft}
color="--fgcolor-neutral-tertiary" /></Button.Button>
</Layout.Stack>
<Divider />
<Typography.Text>
Phasellus a ultricies nulla. Proin tristique aliquam dui. Phasellus porta
sodales justo, et feugiat ligula pulvinar sed. Morbi et nulla hendrerit,
pellentesque est sodales, euismod magna. Suspendisse vel massa arcu. Nulla
ultrices sit amet metus ac euismod. Curabitur ultrices aliquet libero, a
pharetra orci tristique in. Etiam egestas fermentum justo ut semper. Sed
vulputate eros erat, ac sollicitudin nulla condimentum volutpat. Sed vulputate
est ante.
</Typography.Text>
<Divider />
<!-- CHAT CONTENT -->
</Layout.Stack>
<div class="input">
<textarea placeholder="Reply..."></textarea>
<div class="options">
<Layout.Stack direction="row" justifyContent="flex-end">
<Button.Button icon variant="secondary" size="s"
><Icon
icon={IconPaperClip}
color="--fgcolor-neutral-tertiary" /></Button.Button>
<Button.Button icon variant="secondary" size="s"
><Icon
icon={IconArrowUp}
color="--fgcolor-neutral-tertiary" /></Button.Button>
</Layout.Stack>
</div>
</div>
</Layout.Stack>
</div>
</Card.Base>
@@ -37,6 +53,8 @@
<style lang="scss">
.chat {
width: 0;
position: sticky;
top: 48px;
overflow: hidden;
transition: width 0.3s ease-in-out;
@@ -53,4 +71,19 @@
transition: opacity 0.3s ease-in-out 0.2s;
opacity: 1;
}
.input {
margin-inline: calc(-1 * var(--space-9));
margin-block-end: calc(-1 * var(--space-9));
border-top: 1px solid var(--border-neutral);
border-radius: var(--border-radius-m);
padding: var(--space-6);
textarea {
width: 100%;
min-height: 100px;
overflow: hidden;
resize: none;
}
}
</style>