llmasaservice-ui 0.8.0 → 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 -19
  2. package/package.json +1 -1
  3. package/src/ChatPanel.css +21 -20
package/dist/index.css CHANGED
@@ -1,17 +1,15 @@
1
1
  /* src/ChatPanel.css */
2
- *,
3
- *::before,
4
- *::after {
5
- box-sizing: border-box;
6
- margin: 0;
7
- padding: 0;
8
- }
9
2
  :root {
10
3
  --spacing-small: 0.3rem;
11
4
  --spacing-medium: 0.5rem;
12
5
  --spacing-large: 1rem;
13
6
  --border-radius: 10px;
14
- --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;
15
13
  --background-color: #fff;
16
14
  --title-text-color: #555;
17
15
  --title-background-color: #fff;
@@ -97,8 +95,8 @@
97
95
  margin: 0 var(--spacing-small);
98
96
  padding: var(--spacing-medium);
99
97
  border-radius: var(--border-radius);
100
- height: 3rem;
101
- min-height: 3rem;
98
+ height: var(--input-height);
99
+ min-height: var(--input-height);
102
100
  resize: vertical;
103
101
  background-color: var(--input-background-color);
104
102
  border: 1px solid var(--input-border-color);
@@ -116,8 +114,8 @@
116
114
  border: none;
117
115
  border-radius: var(--border-radius);
118
116
  cursor: pointer;
119
- height: 2.5rem;
120
- width: 2.5rem;
117
+ height: var(--button-send-size);
118
+ width: var(--button-send-size);
121
119
  transition: background-color 0.3s ease;
122
120
  }
123
121
  .llm-panel .send-button:hover {
@@ -158,17 +156,16 @@
158
156
  }
159
157
  .llm-panel .copy-button,
160
158
  .llm-panel .thumbs-button {
161
- font-size: 0.75rem;
159
+ font-size: var(--icon-size-small);
162
160
  border: none;
163
161
  background-color: var(--button-action-background-color);
164
162
  color: var(--button-action-text-color);
165
163
  cursor: pointer;
166
- width: 1rem;
167
- height: 1rem;
164
+ width: var(--icon-button-size-small);
165
+ height: var(--icon-button-size-small);
168
166
  display: flex;
169
167
  justify-content: center;
170
168
  align-items: center;
171
- margin: var(--spacing-medium);
172
169
  }
173
170
  .llm-panel .copy-button:hover,
174
171
  .llm-panel .thumbs-button:hover {
@@ -176,10 +173,14 @@
176
173
  background-color: var(--button-background-color-hover);
177
174
  box-shadow: 0 0 5px var(--button-background-color-hover);
178
175
  }
179
- .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
+ }
180
181
  .llm-panel .icon-svg-large {
181
- width: var(--icon-size);
182
- height: var(--icon-size);
182
+ width: var(--icon-size-large);
183
+ height: var(--icon-size-large);
183
184
  margin: 0;
184
185
  }
185
186
  .llm-panel .button-container {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "llmasaservice-ui",
3
- "version": "0.8.0",
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
@@ -2,13 +2,6 @@
2
2
  LLM PANEL CSS
3
3
  Version: 1.1.0 (Improved)
4
4
  -------------------------------------------------------- */
5
- *,
6
- *::before,
7
- *::after {
8
- box-sizing: border-box;
9
- margin: 0;
10
- padding: 0;
11
- }
12
5
 
13
6
  /* Root Variables */
14
7
  :root {
@@ -17,9 +10,13 @@
17
10
  --spacing-medium: 0.5rem;
18
11
  --spacing-large: 1rem;
19
12
 
20
- /* Common Values */
21
13
  --border-radius: 10px;
22
- --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;
23
20
 
24
21
  /* Light Theme Colors */
25
22
  --background-color: #fff;
@@ -130,8 +127,8 @@
130
127
  margin: 0 var(--spacing-small);
131
128
  padding: var(--spacing-medium);
132
129
  border-radius: var(--border-radius);
133
- height: 3rem;
134
- min-height: 3rem;
130
+ height: var(--input-height);
131
+ min-height: var(--input-height);
135
132
  resize: vertical;
136
133
  background-color: var(--input-background-color);
137
134
  border: 1px solid var(--input-border-color);
@@ -153,8 +150,8 @@
153
150
  border: none;
154
151
  border-radius: var(--border-radius);
155
152
  cursor: pointer;
156
- height: 2.5rem;
157
- width: 2.5rem;
153
+ height: var(--button-send-size);
154
+ width: var(--button-send-size);
158
155
  transition: background-color 0.3s ease;
159
156
  }
160
157
 
@@ -206,17 +203,16 @@
206
203
  /* Copy & Thumbs Buttons */
207
204
  .llm-panel .copy-button,
208
205
  .llm-panel .thumbs-button {
209
- font-size: 0.75rem;
206
+ font-size: var(--icon-size-small);
210
207
  border: none;
211
208
  background-color: var(--button-action-background-color);
212
209
  color: var(--button-action-text-color);
213
210
  cursor: pointer;
214
- width: 1rem;
215
- height: 1rem;
211
+ width: var(--icon-button-size-small);
212
+ height: var(--icon-button-size-small);
216
213
  display: flex;
217
214
  justify-content: center;
218
215
  align-items: center;
219
- margin: var(--spacing-medium);
220
216
  }
221
217
 
222
218
  .llm-panel .copy-button:hover,
@@ -227,10 +223,15 @@
227
223
  }
228
224
 
229
225
  /* SVG Icons */
230
- .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
+
231
232
  .llm-panel .icon-svg-large {
232
- width: var(--icon-size);
233
- height: var(--icon-size);
233
+ width: var(--icon-size-large);
234
+ height: var(--icon-size-large);
234
235
  margin: 0;
235
236
  }
236
237