TP-O commited on
Commit
293ff91
1 Parent(s): a974db9

Fix stop generating button (#244)

Browse files

* fix stop btn

* use media query

package-lock.json CHANGED
@@ -26,6 +26,7 @@
26
  },
27
  "devDependencies": {
28
  "@iconify-json/carbon": "^1.1.16",
 
29
  "@sveltejs/adapter-node": "^1.2.4",
30
  "@sveltejs/kit": "^1.15.10",
31
  "@tailwindcss/typography": "^0.5.9",
@@ -539,6 +540,15 @@
539
  "@iconify/types": "*"
540
  }
541
  },
 
 
 
 
 
 
 
 
 
542
  "node_modules/@iconify/types": {
543
  "version": "2.0.0",
544
  "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
 
26
  },
27
  "devDependencies": {
28
  "@iconify-json/carbon": "^1.1.16",
29
+ "@iconify-json/eos-icons": "^1.1.6",
30
  "@sveltejs/adapter-node": "^1.2.4",
31
  "@sveltejs/kit": "^1.15.10",
32
  "@tailwindcss/typography": "^0.5.9",
 
540
  "@iconify/types": "*"
541
  }
542
  },
543
+ "node_modules/@iconify-json/eos-icons": {
544
+ "version": "1.1.6",
545
+ "resolved": "https://registry.npmjs.org/@iconify-json/eos-icons/-/eos-icons-1.1.6.tgz",
546
+ "integrity": "sha512-A1kUcVbgrdlBBacFcs+srwnfSH9htQvlgbi0u6Jf38lp4PZAK3InXVbVySrJKx//FJtSMdnpZh0b89yjcAIIBg==",
547
+ "dev": true,
548
+ "dependencies": {
549
+ "@iconify/types": "*"
550
+ }
551
+ },
552
  "node_modules/@iconify/types": {
553
  "version": "2.0.0",
554
  "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
package.json CHANGED
@@ -15,6 +15,7 @@
15
  },
16
  "devDependencies": {
17
  "@iconify-json/carbon": "^1.1.16",
 
18
  "@sveltejs/adapter-node": "^1.2.4",
19
  "@sveltejs/kit": "^1.15.10",
20
  "@tailwindcss/typography": "^0.5.9",
 
15
  },
16
  "devDependencies": {
17
  "@iconify-json/carbon": "^1.1.16",
18
+ "@iconify-json/eos-icons": "^1.1.6",
19
  "@sveltejs/adapter-node": "^1.2.4",
20
  "@sveltejs/kit": "^1.15.10",
21
  "@tailwindcss/typography": "^0.5.9",
src/lib/components/StopGeneratingBtn.svelte CHANGED
@@ -8,7 +8,7 @@
8
  <button
9
  type="button"
10
  on:click
11
- class="btn absolute flex rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600
12
  {className}
13
  {visible ? 'visible opacity-100' : 'invisible opacity-0'}
14
  "
 
8
  <button
9
  type="button"
10
  on:click
11
+ class="btn flex rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600
12
  {className}
13
  {visible ? 'visible opacity-100' : 'invisible opacity-0'}
14
  "
src/lib/components/chat/ChatWindow.svelte CHANGED
@@ -4,6 +4,8 @@
4
 
5
  import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
6
  import CarbonExport from "~icons/carbon/export";
 
 
7
 
8
  import ChatMessages from "./ChatMessages.svelte";
9
  import ChatInput from "./ChatInput.svelte";
@@ -56,11 +58,9 @@
56
  <div
57
  class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
58
  >
59
- <StopGeneratingBtn
60
- visible={loading}
61
- className="right-5 mr-[1px] md:mr-0 md:right-7 top-6 md:top-10 z-10"
62
- on:click={() => dispatch("stop")}
63
- />
64
  <form
65
  on:submit|preventDefault={handleSubmit}
66
  class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 focus-within:border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-gray-500
@@ -74,13 +74,28 @@
74
  maxRows={4}
75
  disabled={isReadOnly}
76
  />
77
- <button
78
- 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"
79
- disabled={!message || loading || isReadOnly}
80
- type="submit"
81
- >
82
- <CarbonSendAltFilled />
83
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
84
  </div>
85
  </form>
86
  <div class="mt-2 flex justify-between self-stretch px-1 text-xs text-gray-400/90 max-sm:gap-2">
 
4
 
5
  import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
6
  import CarbonExport from "~icons/carbon/export";
7
+ import CarbonPause from "~icons/carbon/pause-filled";
8
+ import EosIconsLoading from "~icons/eos-icons/loading";
9
 
10
  import ChatMessages from "./ChatMessages.svelte";
11
  import ChatInput from "./ChatInput.svelte";
 
58
  <div
59
  class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
60
  >
61
+ <div class="my-[0.5rem] hidden justify-center sm:flex">
62
+ <StopGeneratingBtn visible={loading} on:click={() => dispatch("stop")} />
63
+ </div>
 
 
64
  <form
65
  on:submit|preventDefault={handleSubmit}
66
  class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 focus-within:border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-gray-500
 
74
  maxRows={4}
75
  disabled={isReadOnly}
76
  />
77
+
78
+ {#if loading}
79
+ <button
80
+ class="btn mx-1 my-1 inline-block 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 md:hidden"
81
+ on:click={() => dispatch("stop")}
82
+ >
83
+ <CarbonPause />
84
+ </button>
85
+ <div
86
+ class="mx-1 my-1 hidden h-[2.4rem] items-center 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 md:flex"
87
+ >
88
+ <EosIconsLoading />
89
+ </div>
90
+ {:else}
91
+ <button
92
+ 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"
93
+ disabled={!message || isReadOnly}
94
+ type="submit"
95
+ >
96
+ <CarbonSendAltFilled />
97
+ </button>
98
+ {/if}
99
  </div>
100
  </form>
101
  <div class="mt-2 flex justify-between self-stretch px-1 text-xs text-gray-400/90 max-sm:gap-2">