Hugging Face's logo

Spaces:
nirdrang
/
chat-ui_test
Build error

App Files Community
victor HF staff commited on
Commit
1c8195c
•
1 Parent(s): 4dae10f

Fix mobile height (#79)

Browse files

* 100% screen on mobile

* examples size

* send button ios

Files changed (4) hide show
  1. src/app.html +4 -4
  2. src/lib/components/chat/ChatInput.svelte +1 -0
  3. src/lib/components/chat/ChatIntroduction.svelte +3 -3
  4. src/routes/+layout.svelte +1 -1
src/app.html CHANGED
@@ -1,9 +1,9 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
  <meta charset="utf-8" />
5
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
6
- <meta name="viewport" content="width=device-width" />
7
  <title>HuggingChat</title>
8
  <meta
9
  name="description"
@@ -12,8 +12,8 @@
12
  <meta property="og:image" content="%sveltekit.assets%/thumbnail.png" />
13
  %sveltekit.head%
14
  </head>
15
- <body data-sveltekit-preload-data="hover" class="dark:bg-gray-900">
16
- <div style="display: contents">%sveltekit.body%</div>
17
  </body>
18
  <script>
19
  if (localStorage.theme === "dark") {
 
1
  <!DOCTYPE html>
2
+ <html lang="en" class="h-full">
3
  <head>
4
  <meta charset="utf-8" />
5
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
7
  <title>HuggingChat</title>
8
  <meta
9
  name="description"
 
12
  <meta property="og:image" content="%sveltekit.assets%/thumbnail.png" />
13
  %sveltekit.head%
14
  </head>
15
+ <body data-sveltekit-preload-data="hover" class="dark:bg-gray-900 h-full">
16
+ <div class="contents h-full">%sveltekit.body%</div>
17
  </body>
18
  <script>
19
  if (localStorage.theme === "dark") {
src/lib/components/chat/ChatInput.svelte CHANGED
@@ -28,6 +28,7 @@
28
  style="min-height: {minHeight}; max-height: {maxHeight}">{value + "&nbsp;\n"}</pre>
29
 
30
  <textarea
 
31
  tabindex="0"
32
  rows="1"
33
  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-custom overflow-x-hidden overflow-y-scroll"
 
28
  style="min-height: {minHeight}; max-height: {maxHeight}">{value + "&nbsp;\n"}</pre>
29
 
30
  <textarea
31
+ enterkeyhint="send"
32
  tabindex="0"
33
  rows="1"
34
  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-custom overflow-x-hidden overflow-y-scroll"
src/lib/components/chat/ChatIntroduction.svelte CHANGED
@@ -68,7 +68,7 @@
68
  <div class="grid lg:grid-cols-3 gap-3 lg:gap-5">
69
  <button
70
  type="button"
71
- class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
72
  on:click={() =>
73
  dispatch(
74
  "message",
@@ -79,7 +79,7 @@
79
  </button>
80
  <button
81
  type="button"
82
- class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
83
  on:click={() =>
84
  dispatch("message", "Code a snake game in python, the snake should be red")}
85
  >
@@ -87,7 +87,7 @@
87
  </button>
88
  <button
89
  type="button"
90
- class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
91
  on:click={() => dispatch("message", "How do I make a lemon cheesecake?")}
92
  >
93
  "Assist in a task"
 
68
  <div class="grid lg:grid-cols-3 gap-3 lg:gap-5">
69
  <button
70
  type="button"
71
+ class="text-gray-600 dark:text-gray-300 p-2.5 sm:p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
72
  on:click={() =>
73
  dispatch(
74
  "message",
 
79
  </button>
80
  <button
81
  type="button"
82
+ class="text-gray-600 dark:text-gray-300 p-2.5 sm:p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
83
  on:click={() =>
84
  dispatch("message", "Code a snake game in python, the snake should be red")}
85
  >
 
87
  </button>
88
  <button
89
  type="button"
90
+ class="text-gray-600 dark:text-gray-300 p-2.5 sm:p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
91
  on:click={() => dispatch("message", "How do I make a lemon cheesecake?")}
92
  >
93
  "Assist in a task"
src/routes/+layout.svelte CHANGED
@@ -41,7 +41,7 @@
41
  </script>
42
 
43
  <div
44
- class="grid h-screen w-screen grid-cols-1 grid-rows-[auto,1fr] md:grid-rows-[1fr] md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
45
  >
46
  <MobileNav
47
  isOpen={isNavOpen}
 
41
  </script>
42
 
43
  <div
44
+ class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] md:grid-rows-[1fr] md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
45
  >
46
  <MobileNav
47
  isOpen={isNavOpen}