base

frontend/src/lib/components/chatbotDemo/InputRow.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    import { mdiSendVariantOutline } from "@mdi/js"
+    import Icon from "../widgets/Icon.svelte"
+    import type { Chat } from "./chat"
+    let { chat }: { chat: Chat } = $props()
+    let value = $state("")
+    let textareaEl: HTMLTextAreaElement = $state(null)
+    function autoResize() {
+        if (textareaEl) {
+            textareaEl.style.height = "auto"
+            textareaEl.style.height = textareaEl.scrollHeight + "px"
+        }
+    }
+</script>
+
+<div class="input-row">
+    <textarea
+        placeholder="Schreibe eine Nachricht..."
+        bind:value
+        rows="1"
+        bind:this={textareaEl}
+        oninput={autoResize}
+        onkeydown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault()
+                if (value.trim()) {
+                    chat.generateResponse(value.trim())
+                    value = ""
+                }
+            }
+        }}
+    ></textarea>
+    <button
+        class="btn"
+        onclick={() => {
+            if (value.trim()) {
+                chat.generateResponse(value.trim())
+                value = ""
+            }
+        }}
+        aria-label="Nachricht senden"
+    >
+        <Icon
+            path={mdiSendVariantOutline}
+            size="1.4rem"
+        />
+    </button>
+</div>
+
+<style lang="less">
+    .input-row {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        position: relative;
+        textarea {
+            width: 100%;
+            min-height: 3.6rem;
+            padding: 0.6rem;
+            border-radius: 1.2rem;
+            padding-bottom: 2.4rem;
+            max-height: 12rem;
+            line-height: 1.4rem;
+            resize: none;
+            overflow: hidden;
+            color: white;
+            &:focus {
+                outline: none;
+                border-top: 1px solid var(--primary-100);
+            }
+        }
+        .btn {
+            position: absolute;
+            bottom: 0.6rem;
+            right: 0.6rem;
+            height: 2rem;
+            width: 2.4rem;
+            min-width: unset;
+            background-color: var(--primary-100);
+            border-radius: 4px;
+        }
+    }
+</style>