Spaces:
Running
Running
dylanebert
commited on
Commit
·
bc9b59d
1
Parent(s):
db9635c
smaller screens fit
Browse files
src/lib/components/chat/ExampleRow.svelte
CHANGED
@@ -148,7 +148,8 @@
|
|
148 |
font-size: 0.7rem;
|
149 |
color: rgba(255, 255, 255, 0.65);
|
150 |
will-change: transform, box-shadow;
|
151 |
-
|
|
|
152 |
}
|
153 |
|
154 |
.example-pill:hover {
|
@@ -160,24 +161,61 @@
|
|
160 |
.example-icon {
|
161 |
font-size: 0.75rem;
|
162 |
opacity: 0.8;
|
|
|
163 |
}
|
164 |
|
165 |
.example-text {
|
166 |
font-size: 0.7rem;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
167 |
}
|
168 |
|
169 |
-
@media (max-width:
|
170 |
.examples-row {
|
171 |
flex-direction: column;
|
172 |
align-items: stretch;
|
173 |
gap: 0.5rem;
|
174 |
-
padding: 0.75rem;
|
175 |
}
|
|
|
176 |
.examples-label {
|
177 |
text-align: center;
|
|
|
178 |
}
|
|
|
179 |
.examples-list {
|
180 |
justify-content: center;
|
181 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
182 |
}
|
183 |
</style>
|
|
|
148 |
font-size: 0.7rem;
|
149 |
color: rgba(255, 255, 255, 0.65);
|
150 |
will-change: transform, box-shadow;
|
151 |
+
flex-shrink: 0;
|
152 |
+
min-width: 0;
|
153 |
}
|
154 |
|
155 |
.example-pill:hover {
|
|
|
161 |
.example-icon {
|
162 |
font-size: 0.75rem;
|
163 |
opacity: 0.8;
|
164 |
+
flex-shrink: 0;
|
165 |
}
|
166 |
|
167 |
.example-text {
|
168 |
font-size: 0.7rem;
|
169 |
+
white-space: nowrap;
|
170 |
+
overflow: hidden;
|
171 |
+
text-overflow: ellipsis;
|
172 |
+
}
|
173 |
+
|
174 |
+
@media (max-width: 768px) {
|
175 |
+
.examples-row {
|
176 |
+
gap: 0.75rem;
|
177 |
+
padding: 0.75rem;
|
178 |
+
}
|
179 |
+
|
180 |
+
.examples-list {
|
181 |
+
gap: 0.4rem;
|
182 |
+
}
|
183 |
+
|
184 |
+
.example-pill {
|
185 |
+
padding: 0.25rem 0.5rem;
|
186 |
+
font-size: 0.65rem;
|
187 |
+
}
|
188 |
+
|
189 |
+
.example-text {
|
190 |
+
font-size: 0.65rem;
|
191 |
+
}
|
192 |
}
|
193 |
|
194 |
+
@media (max-width: 480px) {
|
195 |
.examples-row {
|
196 |
flex-direction: column;
|
197 |
align-items: stretch;
|
198 |
gap: 0.5rem;
|
|
|
199 |
}
|
200 |
+
|
201 |
.examples-label {
|
202 |
text-align: center;
|
203 |
+
font-size: 0.65rem;
|
204 |
}
|
205 |
+
|
206 |
.examples-list {
|
207 |
justify-content: center;
|
208 |
}
|
209 |
+
|
210 |
+
.example-pill {
|
211 |
+
flex: 0 1 auto;
|
212 |
+
max-width: calc(50% - 0.25rem);
|
213 |
+
}
|
214 |
+
}
|
215 |
+
|
216 |
+
@media (max-width: 360px) {
|
217 |
+
.example-pill {
|
218 |
+
max-width: 100%;
|
219 |
+
}
|
220 |
}
|
221 |
</style>
|
src/lib/components/chat/context.md
CHANGED
@@ -11,7 +11,7 @@ AI chat interface with enhanced contrast dark theme and dopamine-driven micro-in
|
|
11 |
- `TextRenderer.svelte` - Progressive text reveal with streaming-aware tool call filtering
|
12 |
- `MessageInput.svelte` - Input with charge-up animations and success feedback
|
13 |
- `ExampleMessages.svelte` - Model limitations warning when chat is empty
|
14 |
-
- `ExampleRow.svelte` -
|
15 |
- `segments/ToolBlock.svelte` - Tool execution with icons, colors, and progress bars
|
16 |
- `segments/TodoSegment.svelte` - Task tracker with progress bar and milestone celebrations
|
17 |
|
|
|
11 |
- `TextRenderer.svelte` - Progressive text reveal with streaming-aware tool call filtering
|
12 |
- `MessageInput.svelte` - Input with charge-up animations and success feedback
|
13 |
- `ExampleMessages.svelte` - Model limitations warning when chat is empty
|
14 |
+
- `ExampleRow.svelte` - Responsive example prompts above input
|
15 |
- `segments/ToolBlock.svelte` - Tool execution with icons, colors, and progress bars
|
16 |
- `segments/TodoSegment.svelte` - Task tracker with progress bar and milestone celebrations
|
17 |
|