Adrien Denat commited on
Commit
6e856a0
1 Parent(s): 743240e

add support for textArea autoheight + line break + tweak styling of input

Browse files
src/lib/components/TextArea.svelte ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ export let value = '';
3
+ export let minRows = 1;
4
+ export let maxRows: null | number = null;
5
+ export let placeholder = '';
6
+ export let autofocus = false;
7
+
8
+ $: minHeight = `${1 + minRows * 1.5}em`;
9
+ $: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
10
+
11
+ function handleKeydown(event: KeyboardEvent) {
12
+ // submit on enter
13
+ if (event.key === 'Enter' && !event.shiftKey) {
14
+ event.preventDefault();
15
+ // @ts-ignore - requestSubmit is not in the DOM typings
16
+ event.target?.form?.requestSubmit();
17
+ }
18
+ }
19
+ </script>
20
+
21
+ <div class="relative w-full">
22
+ <pre
23
+ class="invisible py-3"
24
+ aria-hidden="true"
25
+ style="min-height: {minHeight}; max-height: {maxHeight}">{value + '\n'}</pre>
26
+
27
+ <textarea
28
+ tabindex="0"
29
+ rows="1"
30
+ class="absolute m-0 w-full h-full top-0 resize-none border-0 bg-transparent p-3 focus:ring-0 focus-visible:ring-0 dark:bg-transparent outline-none scrollbar"
31
+ bind:value
32
+ on:keydown={handleKeydown}
33
+ {placeholder}
34
+ {autofocus}
35
+ />
36
+ </div>
37
+
38
+ <style>
39
+ pre,
40
+ textarea {
41
+ font-family: inherit;
42
+ box-sizing: border-box;
43
+ line-height: 1.5;
44
+ }
45
+ </style>
src/routes/+page.svelte CHANGED
@@ -135,35 +135,41 @@
135
  </div>
136
  </div>
137
  <div
138
- class="flex items-center bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 h-32 w-full"
139
  >
140
  <form
141
  on:submit={onWrite}
142
  class="shadow-alternate relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 dark:bg-gray-700 dark:border-gray-600"
143
  >
144
- <svg
145
- class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none"
146
- xmlns="http://www.w3.org/2000/svg"
147
- xmlns:xlink="http://www.w3.org/1999/xlink"
148
- aria-hidden="true"
149
- focusable="false"
150
- role="img"
151
- width="1em"
152
- height="1em"
153
- preserveAspectRatio="xMidYMid meet"
154
- viewBox="0 0 32 32"
155
- ><path
156
- d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
157
- fill="currentColor"
158
- /></svg
159
- >
160
- <input
161
- class="flex-1 border-none bg-transparent px-1 py-3 pr-3 pl-10 outline-none"
162
- bind:value={message}
163
- on:submit={onWrite}
164
- placeholder="Ask anything"
165
- autofocus
166
- />
 
 
 
 
 
 
167
  </form>
168
  </div>
169
  </div>
 
135
  </div>
136
  </div>
137
  <div
138
+ class="flex items-center bg-gradient-to-t from-white dark:from-gray-900 to-transparent justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-8 w-full"
139
  >
140
  <form
141
  on:submit={onWrite}
142
  class="shadow-alternate relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 dark:bg-gray-700 dark:border-gray-600"
143
  >
144
+ <div class="flex flex-1 border-none bg-transparent">
145
+ <TextArea
146
+ placeholder="Ask anything"
147
+ bind:value={message}
148
+ on:submit={onWrite}
149
+ autofocus
150
+ maxRows={10}
151
+ />
152
+ <button
153
+ class="p-1 px-[0.7rem] self-end my-1 h-[2.4rem] rounded-lg text-gray-500 hover:bg-gray-100 enabled:dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent disabled:opacity-40 mr-1"
154
+ >
155
+ <svg
156
+ class="text-gray-300 pointer-events-none"
157
+ xmlns="http://www.w3.org/2000/svg"
158
+ xmlns:xlink="http://www.w3.org/1999/xlink"
159
+ aria-hidden="true"
160
+ focusable="false"
161
+ role="img"
162
+ width="1em"
163
+ height="1em"
164
+ preserveAspectRatio="xMidYMid meet"
165
+ viewBox="0 0 32 32"
166
+ ><path
167
+ d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
168
+ fill="currentColor"
169
+ /></svg
170
+ ></button
171
+ >
172
+ </div>
173
  </form>
174
  </div>
175
  </div>