Spaces:
Running
Running
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 |
|