llmasaservice-ui 0.8.1 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.css +20 -12
  2. package/package.json +1 -1
  3. package/src/ChatPanel.css +21 -13
package/dist/index.css CHANGED
@@ -4,7 +4,12 @@
4
4
  --spacing-medium: 0.5rem;
5
5
  --spacing-large: 1rem;
6
6
  --border-radius: 10px;
7
- --icon-size: 1.25rem;
7
+ --icon-size-large: 1rem;
8
+ --icon-button-size-large: 2.5rem;
9
+ --icon-size-small: 1.5rem;
10
+ --icon-button-size-small: 1.7rem;
11
+ --button-send-size: 2.5rem;
12
+ --input-height: 1.5rem;
8
13
  --background-color: #fff;
9
14
  --title-text-color: #555;
10
15
  --title-background-color: #fff;
@@ -90,8 +95,8 @@
90
95
  margin: 0 var(--spacing-small);
91
96
  padding: var(--spacing-medium);
92
97
  border-radius: var(--border-radius);
93
- height: 3rem;
94
- min-height: 3rem;
98
+ height: var(--input-height);
99
+ min-height: var(--input-height);
95
100
  resize: vertical;
96
101
  background-color: var(--input-background-color);
97
102
  border: 1px solid var(--input-border-color);
@@ -109,8 +114,8 @@
109
114
  border: none;
110
115
  border-radius: var(--border-radius);
111
116
  cursor: pointer;
112
- height: 2.5rem;
113
- width: 2.5rem;
117
+ height: var(--button-send-size);
118
+ width: var(--button-send-size);
114
119
  transition: background-color 0.3s ease;
115
120
  }
116
121
  .llm-panel .send-button:hover {
@@ -151,17 +156,16 @@
151
156
  }
152
157
  .llm-panel .copy-button,
153
158
  .llm-panel .thumbs-button {
154
- font-size: 0.75rem;
159
+ font-size: var(--icon-size-small);
155
160
  border: none;
156
161
  background-color: var(--button-action-background-color);
157
162
  color: var(--button-action-text-color);
158
163
  cursor: pointer;
159
- width: 1rem;
160
- height: 1rem;
164
+ width: var(--icon-button-size-small);
165
+ height: var(--icon-button-size-small);
161
166
  display: flex;
162
167
  justify-content: center;
163
168
  align-items: center;
164
- margin: var(--spacing-medium);
165
169
  }
166
170
  .llm-panel .copy-button:hover,
167
171
  .llm-panel .thumbs-button:hover {
@@ -169,10 +173,14 @@
169
173
  background-color: var(--button-background-color-hover);
170
174
  box-shadow: 0 0 5px var(--button-background-color-hover);
171
175
  }
172
- .llm-panel .icon-svg,
176
+ .llm-panel .icon-svg {
177
+ width: var(--icon-size-small);
178
+ height: var(--icon-size-small);
179
+ margin: 0;
180
+ }
173
181
  .llm-panel .icon-svg-large {
174
- width: var(--icon-size);
175
- height: var(--icon-size);
182
+ width: var(--icon-size-large);
183
+ height: var(--icon-size-large);
176
184
  margin: 0;
177
185
  }
178
186
  .llm-panel .button-container {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "llmasaservice-ui",
3
- "version": "0.8.1",
3
+ "version": "0.8.2",
4
4
  "description": "Prebuilt UI components for LLMAsAService.io",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
package/src/ChatPanel.css CHANGED
@@ -10,9 +10,13 @@
10
10
  --spacing-medium: 0.5rem;
11
11
  --spacing-large: 1rem;
12
12
 
13
- /* Common Values */
14
13
  --border-radius: 10px;
15
- --icon-size: 1.25rem;
14
+ --icon-size-large: 1rem;
15
+ --icon-button-size-large: 2.5rem;
16
+ --icon-size-small: 1.5rem;
17
+ --icon-button-size-small: 1.7rem;
18
+ --button-send-size: 2.5rem;
19
+ --input-height: 1.5rem;
16
20
 
17
21
  /* Light Theme Colors */
18
22
  --background-color: #fff;
@@ -123,8 +127,8 @@
123
127
  margin: 0 var(--spacing-small);
124
128
  padding: var(--spacing-medium);
125
129
  border-radius: var(--border-radius);
126
- height: 3rem;
127
- min-height: 3rem;
130
+ height: var(--input-height);
131
+ min-height: var(--input-height);
128
132
  resize: vertical;
129
133
  background-color: var(--input-background-color);
130
134
  border: 1px solid var(--input-border-color);
@@ -146,8 +150,8 @@
146
150
  border: none;
147
151
  border-radius: var(--border-radius);
148
152
  cursor: pointer;
149
- height: 2.5rem;
150
- width: 2.5rem;
153
+ height: var(--button-send-size);
154
+ width: var(--button-send-size);
151
155
  transition: background-color 0.3s ease;
152
156
  }
153
157
 
@@ -199,17 +203,16 @@
199
203
  /* Copy & Thumbs Buttons */
200
204
  .llm-panel .copy-button,
201
205
  .llm-panel .thumbs-button {
202
- font-size: 0.75rem;
206
+ font-size: var(--icon-size-small);
203
207
  border: none;
204
208
  background-color: var(--button-action-background-color);
205
209
  color: var(--button-action-text-color);
206
210
  cursor: pointer;
207
- width: 1rem;
208
- height: 1rem;
211
+ width: var(--icon-button-size-small);
212
+ height: var(--icon-button-size-small);
209
213
  display: flex;
210
214
  justify-content: center;
211
215
  align-items: center;
212
- margin: var(--spacing-medium);
213
216
  }
214
217
 
215
218
  .llm-panel .copy-button:hover,
@@ -220,10 +223,15 @@
220
223
  }
221
224
 
222
225
  /* SVG Icons */
223
- .llm-panel .icon-svg,
226
+ .llm-panel .icon-svg {
227
+ width: var(--icon-size-small);
228
+ height: var(--icon-size-small);
229
+ margin: 0;
230
+ }
231
+
224
232
  .llm-panel .icon-svg-large {
225
- width: var(--icon-size);
226
- height: var(--icon-size);
233
+ width: var(--icon-size-large);
234
+ height: var(--icon-size-large);
227
235
  margin: 0;
228
236
  }
229
237