From 8f3d1ba8a00cebadb566d4bdb2328bd09c3fbfbc Mon Sep 17 00:00:00 2001
From: Raven Scott <snxraven@gmail.com>
Date: Sat, 1 Apr 2023 04:15:12 -0400
Subject: [PATCH] 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>
---
 web/src/routes/chat/[id]/+page.svelte | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/web/src/routes/chat/[id]/+page.svelte b/web/src/routes/chat/[id]/+page.svelte
index 6e3124f..67425cd 100644
--- a/web/src/routes/chat/[id]/+page.svelte
+++ b/web/src/routes/chat/[id]/+page.svelte
@@ -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}
     >