llmasaservice-ui 0.8.3 → 0.8.5

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 (6) hide show
  1. package/dist/index.css +6 -6
  2. package/dist/index.js +1 -0
  3. package/dist/index.mjs +1 -0
  4. package/package.json +1 -1
  5. package/src/ChatPanel.css +6 -6
  6. package/src/ChatPanel.tsx +1 -0
package/dist/index.css CHANGED
@@ -8,8 +8,8 @@
8
8
  --icon-button-size-large: 2.5rem;
9
9
  --icon-size-small: 1.5rem;
10
10
  --icon-button-size-small: 1.7rem;
11
- --button-send-size: 40px;
12
- --input-height: 30px;
11
+ --button-send-size: 3rem;
12
+ --input-height: 3rem;
13
13
  --background-color: #fff;
14
14
  --title-text-color: #555;
15
15
  --title-background-color: #fff;
@@ -89,11 +89,10 @@
89
89
  align-items: center;
90
90
  margin-top: var(--spacing-small);
91
91
  }
92
- .llm-panel textarea {
92
+ .llm-panel .chat-input {
93
93
  flex: 1;
94
94
  color: var(--input-text-color);
95
95
  margin: 0 var(--spacing-small);
96
- padding: var(--spacing-medium);
97
96
  border-radius: var(--border-radius);
98
97
  height: var(--input-height);
99
98
  min-height: var(--input-height);
@@ -101,7 +100,7 @@
101
100
  background-color: var(--input-background-color);
102
101
  border: 1px solid var(--input-border-color);
103
102
  }
104
- .llm-panel textarea:focus,
103
+ .llm-panel .chat-input:focus,
105
104
  .llm-panel input:focus {
106
105
  outline: none;
107
106
  border: 2px solid var(--button-background-color-hover);
@@ -111,7 +110,8 @@
111
110
  margin-right: var(--spacing-small);
112
111
  background-color: var(--button-background-color);
113
112
  color: var(--button-text-color);
114
- border: none;
113
+ background-color: var(--input-background-color);
114
+ border: 1px solid var(--input-border-color);
115
115
  border-radius: var(--border-radius);
116
116
  cursor: pointer;
117
117
  height: var(--button-send-size);
package/dist/index.js CHANGED
@@ -912,6 +912,7 @@ var ChatPanel = ({
912
912
  /* @__PURE__ */ import_react3.default.createElement("div", { className: "input-container" }, /* @__PURE__ */ import_react3.default.createElement(
913
913
  "textarea",
914
914
  {
915
+ className: "chat-input",
915
916
  placeholder,
916
917
  value: nextPrompt,
917
918
  onChange: (e) => setNextPrompt(e.target.value),
package/dist/index.mjs CHANGED
@@ -878,6 +878,7 @@ var ChatPanel = ({
878
878
  /* @__PURE__ */ React3.createElement("div", { className: "input-container" }, /* @__PURE__ */ React3.createElement(
879
879
  "textarea",
880
880
  {
881
+ className: "chat-input",
881
882
  placeholder,
882
883
  value: nextPrompt,
883
884
  onChange: (e) => setNextPrompt(e.target.value),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "llmasaservice-ui",
3
- "version": "0.8.3",
3
+ "version": "0.8.5",
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
@@ -15,8 +15,8 @@
15
15
  --icon-button-size-large: 2.5rem;
16
16
  --icon-size-small: 1.5rem;
17
17
  --icon-button-size-small: 1.7rem;
18
- --button-send-size: 40px;
19
- --input-height: 30px;
18
+ --button-send-size: 3rem;
19
+ --input-height: 3rem;
20
20
 
21
21
  /* Light Theme Colors */
22
22
  --background-color: #fff;
@@ -121,11 +121,10 @@
121
121
  }
122
122
 
123
123
  /* Textarea Styling */
124
- .llm-panel textarea {
124
+ .llm-panel .chat-input {
125
125
  flex: 1;
126
126
  color: var(--input-text-color);
127
127
  margin: 0 var(--spacing-small);
128
- padding: var(--spacing-medium);
129
128
  border-radius: var(--border-radius);
130
129
  height: var(--input-height);
131
130
  min-height: var(--input-height);
@@ -135,7 +134,7 @@
135
134
  }
136
135
 
137
136
  /* Accessible Focus State */
138
- .llm-panel textarea:focus,
137
+ .llm-panel .chat-input:focus,
139
138
  .llm-panel input:focus {
140
139
  outline: none;
141
140
  border: 2px solid var(--button-background-color-hover);
@@ -147,7 +146,8 @@
147
146
  margin-right: var(--spacing-small);
148
147
  background-color: var(--button-background-color);
149
148
  color: var(--button-text-color);
150
- border: none;
149
+ background-color: var(--input-background-color);
150
+ border: 1px solid var(--input-border-color);
151
151
  border-radius: var(--border-radius);
152
152
  cursor: pointer;
153
153
  height: var(--button-send-size);
package/src/ChatPanel.tsx CHANGED
@@ -971,6 +971,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
971
971
 
972
972
  <div className="input-container">
973
973
  <textarea
974
+ className="chat-input"
974
975
  placeholder={placeholder}
975
976
  value={nextPrompt}
976
977
  onChange={(e) => setNextPrompt(e.target.value)}