When a user hits CTRL+ENTER send input (#121)

* When a user hits CTRL+ENTER send input

* Fixing Input and Send Button Overlay on Mobile

* add a small margin at the bottom

---------

Co-authored-by: raven <you@example.com>
Co-authored-by: Nathan Sarrazin <sarrazin.nathan@gmail.com>
This commit is contained in:
Raven Scott 2023-04-01 04:15:12 -04:00 committed by GitHub
parent 2c1146969e
commit 8f3d1ba8a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -48,15 +48,23 @@
};
}
}
function handleKeyDown(event) {
if (event.key === "Enter" && event.ctrlKey) {
askQuestion();
}
}
</script>
<div class="max-w-4xl mx-auto h-full max-h-screen relative">
<div
class="max-w-4xl mx-auto h-full max-h-screen relative"
on:keydown={handleKeyDown}
>
<h1 class="text-4xl font-bold">Chat with {data.props.parameters.model}</h1>
<h4 class="text-xl font-semibold mb-10">
Started on {startDate.toLocaleString("en-US")}
</h4>
<div class="overflow-y-auto h-[calc(100vh-10rem)] px-10">
<div class="overflow-y-auto h-[calc(100vh-12rem)] px-10 mb-11">
<div class="h-max pb-32">
{#each questions as question}
<div class="chat chat-end my-2">
@ -89,13 +97,12 @@
{/each}
</div>
</div>
<div
class="items-center absolute bottom-0 w-full px-5 left-0 h-32 flex flex-row bg-base-100"
class="items-center w-full px-0 h-0 flex flex-row bg-base-100 justify-center"
>
<textarea
name="question"
class="textarea textarea-bordered h-24 w-full text-lg"
class="textarea textarea-bordered h-10 w-full max-w-xl mb-5 text-lg"
disabled={isLoading}
placeholder="Ask a question..."
bind:value={prompt}
@ -103,7 +110,7 @@
<button
type="submit"
disabled={isLoading}
class={"btn btn-primary max-w-lg m-3 h-24 w-24 text-lg"}
class="btn btn-primary h-10 w-24 text-lg ml-2 mb-5"
class:loading={isLoading}
on:click|preventDefault={askQuestion}
>