Adrien Denat victor HF staff commited on
Commit
6f12e84
1 Parent(s): da7f5d6

Input message improvements (#154)

Browse files

* fix pasting long text not scrolling input properly + add scroll padding for better look

* max rows

---------

Co-authored-by: Victor Mustar <[email protected]>

src/lib/components/chat/ChatInput.svelte CHANGED
@@ -26,15 +26,15 @@
26
 
27
  <div class="relative min-w-0 flex-1">
28
  <pre
29
- class="invisible py-3"
30
  aria-hidden="true"
31
- style="min-height: {minHeight}; max-height: {maxHeight}">{value + "&nbsp;\n"}</pre>
32
 
33
  <textarea
34
  enterkeyhint="send"
35
  tabindex="0"
36
  rows="1"
37
- class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent"
38
  bind:value
39
  bind:this={textareaElement}
40
  {disabled}
 
26
 
27
  <div class="relative min-w-0 flex-1">
28
  <pre
29
+ class="invisible whitespace-pre-wrap p-3"
30
  aria-hidden="true"
31
+ style="min-height: {minHeight}; max-height: {maxHeight}">{value + "\n"}</pre>
32
 
33
  <textarea
34
  enterkeyhint="send"
35
  tabindex="0"
36
  rows="1"
37
+ class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0"
38
  bind:value
39
  bind:this={textareaElement}
40
  {disabled}
src/lib/components/chat/ChatWindow.svelte CHANGED
@@ -59,7 +59,7 @@
59
  bind:value={message}
60
  on:submit={handleSubmit}
61
  autofocus
62
- maxRows={10}
63
  />
64
  <button
65
  class="btn mx-1 my-1 h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100"
 
59
  bind:value={message}
60
  on:submit={handleSubmit}
61
  autofocus
62
+ maxRows={4}
63
  />
64
  <button
65
  class="btn mx-1 my-1 h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100"