ui-svelte 0.2.11 → 0.2.12

package/dist/display/css/chat-box.css

@@ -4,6 +4,10 @@
 		@apply bg-surface;
 	}
 
+	.chatbox.is-prompt {
+		@apply bg-background;
+	}
+
 	.chatbox-header {
 		@apply flex items-center justify-between gap-3 border-b border-muted px-4 py-3;
 		@apply bg-background text-on-background;
@@ -34,6 +38,10 @@
 		@apply bg-surface;
 	}
 
+	.chatbox.is-prompt .chatbox-messages {
+		@apply gap-4 bg-background;
+	}
+
 	.chatbox-messages::-webkit-scrollbar {
 		@apply w-1.5;
 	}
@@ -63,6 +71,26 @@
 		@apply justify-start;
 	}
 
+	.chatbox.is-prompt .message-wrapper {
+		@apply gap-3;
+	}
+
+	.chatbox.is-prompt .message-wrapper.assistant {
+		@apply justify-start;
+	}
+
+	.chatbox.is-prompt .message-wrapper.own {
+		@apply flex-row-reverse;
+	}
+
+	.chatbox.is-prompt .message-wrapper.system {
+		@apply justify-center;
+	}
+
+	.message-avatar {
+		@apply shrink-0;
+	}
+
 	@keyframes messageSlideIn {
 		from {
 			opacity: 0;
@@ -87,10 +115,59 @@
 		@apply rounded-br-md;
 	}
 
+	.chatbox.is-prompt .message {
+		@apply max-w-none flex-1 rounded-2xl px-4 py-3;
+	}
+
+	.chatbox.is-prompt .message.assistant {
+		@apply rounded-tl-md bg-surface;
+	}
+
+	.chatbox.is-prompt .message.own {
+		@apply rounded-tr-md;
+	}
+
+	.chatbox.is-prompt .message.system {
+		@apply max-w-fit rounded-full bg-muted/20 px-4 py-2 text-xs text-on-muted;
+	}
+
 	.message-content {
 		@apply mb-1 whitespace-pre-wrap wrap-break-word leading-relaxed;
 	}
 
+	.streaming-cursor {
+		@apply ml-0.5 inline-block animate-pulse text-primary;
+	}
+	.typing-indicator {
+		@apply flex items-center gap-1 py-1;
+	}
+
+	.typing-indicator span {
+		@apply h-2 w-2 rounded-full bg-on-muted/50;
+		animation: typingBounce 1.4s infinite ease-in-out both;
+	}
+
+	.typing-indicator span:nth-child(1) {
+		animation-delay: -0.32s;
+	}
+
+	.typing-indicator span:nth-child(2) {
+		animation-delay: -0.16s;
+	}
+
+	@keyframes typingBounce {
+		0%,
+		80%,
+		100% {
+			transform: scale(0.8);
+			opacity: 0.5;
+		}
+		40% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
 	.message-meta {
 		@apply flex items-center justify-end gap-1;
 	}
@@ -123,45 +200,96 @@
 		@apply text-sm;
 	}
 
-	/* Variantes de color para mensajes propios */
-	.chatbox-primary .message.own {
-		@apply bg-primary text-on-primary;
-	}
-
-	.chatbox-secondary .message.own {
-		@apply bg-secondary text-on-secondary;
-	}
-
-	.chatbox-success .message.own {
-		@apply bg-success text-on-success;
-	}
-
-	.chatbox-info .message.own {
-		@apply bg-info text-on-info;
-	}
-
-	.chatbox-warning .message.own {
-		@apply bg-warning text-on-warning;
+	.chatbox.is-solid {
+		&.is-primary .message.own {
+			@apply bg-primary text-on-primary;
+		}
+		&.is-secondary .message.own {
+			@apply bg-secondary text-on-secondary;
+		}
+		&.is-muted .message.own {
+			@apply bg-on-muted text-muted;
+		}
+		&.is-success .message.own {
+			@apply bg-success text-on-success;
+		}
+		&.is-info .message.own {
+			@apply bg-info text-on-info;
+		}
+		&.is-warning .message.own {
+			@apply bg-warning text-on-warning;
+		}
+		&.is-danger .message.own {
+			@apply bg-danger text-on-danger;
+		}
 	}
 
-	.chatbox-danger .message.own {
-		@apply bg-danger text-on-danger;
+	.chatbox.is-soft {
+		&.is-primary .message.own {
+			@apply bg-on-primary text-primary;
+		}
+		&.is-secondary .message.own {
+			@apply bg-on-secondary text-secondary;
+		}
+		&.is-muted .message.own {
+			@apply bg-muted text-on-muted;
+		}
+		&.is-success .message.own {
+			@apply bg-on-success text-success;
+		}
+		&.is-info .message.own {
+			@apply bg-on-info text-info;
+		}
+		&.is-warning .message.own {
+			@apply bg-on-warning text-warning;
+		}
+		&.is-danger .message.own {
+			@apply bg-on-danger text-danger;
+		}
 	}
 
-	.chatbox-soft .message.own {
-		@apply bg-primary/10 text-primary;
+	.chatbox.is-outlined {
+		&.is-primary .message.own {
+			@apply border border-primary bg-transparent text-primary;
+		}
+		&.is-secondary .message.own {
+			@apply border border-secondary bg-transparent text-secondary;
+		}
+		&.is-muted .message.own {
+			@apply border border-on-muted bg-transparent text-on-muted;
+		}
+		&.is-success .message.own {
+			@apply border border-success bg-transparent text-success;
+		}
+		&.is-info .message.own {
+			@apply border border-info bg-transparent text-info;
+		}
+		&.is-warning .message.own {
+			@apply border border-warning bg-transparent text-warning;
+		}
+		&.is-danger .message.own {
+			@apply border border-danger bg-transparent text-danger;
+		}
 	}
 
-	.chatbox-outlined .message.own {
-		@apply border border-primary bg-transparent text-primary;
+	.chatbox.is-prompt.is-solid,
+	.chatbox.is-prompt.is-soft,
+	.chatbox.is-prompt.is-outlined {
+		& .message.assistant {
+			@apply bg-surface text-on-surface;
+		}
 	}
 
 	.chatbox-footer {
 		@apply border-t border-surface text-on-background p-2;
 	}
 
+	.chatbox.is-prompt .chatbox-footer {
+		@apply border-t border-muted/30 bg-background;
+	}
+
 	.chatbox-input {
-		@apply appearance-none w-full h-full outline-none;
+		@apply appearance-none w-full h-full outline-none bg-transparent;
 	}
 
 	.chatbox-input-wrapper {
@@ -169,6 +297,10 @@
 		box-shadow: 0 0 3px 0 var(--color-muted);
 	}
 
+	.chatbox.is-prompt .chatbox-input-wrapper {
+		@apply bg-surface;
+	}
+
 	.chatbox-input-actions {
 		@apply flex items-center gap-1;
 	}

package/dist/display/css/chip.css

@@ -1,91 +1,165 @@
 @layer components {
 	.chip {
-		@apply relative flex items-center justify-center w-fit;
-		@appls font-medium whitespace-nowrap;
-		@apply rounded-ui outline-none;
+		@apply relative flex items-center justify-center flex-nowrap w-fit;
+		@apply rounded-ui outline-none truncate whitespace-nowrap;
+		@apply select-none font-medium;
+		@apply transition-all duration-300;
+		@apply disabled:cursor-not-allowed disabled:opacity-50;
+		@apply disabled:transition-none disabled:active:scale-100;
 	}
 
-	.chip.is-sm {
-		@apply min-h-6 gap-2 px-2 text-xs;
-
-		.icon {
-			@apply h-4 w-auto;
+	.chip {
+		&.is-xs {
+			@apply h-5 gap-1 px-3 text-xs;
+			& .icon {
+				@apply h-3 w-auto;
+			}
+			&.has-close {
+				@apply pr-1;
+			}
 		}
-	}
-
-	.chip.is-md {
-		@apply min-h-8 gap-3 px-3 text-sm;
 
-		.icon {
-			@apply h-4 w-auto;
+		&.is-sm {
+			@apply h-6 gap-2 px-3 text-xs;
+			& .icon {
+				@apply h-4 w-auto;
+			}
+			&.has-close {
+				@apply pr-1;
+			}
 		}
-	}
-
-	.chip.is-lg {
-		@apply min-h-10 gap-3 px-4 text-lg;
 
-		.icon {
-			@apply h-6 w-auto;
+		&.is-md {
+			@apply h-8 gap-2 px-4 text-sm;
+			& .icon {
+				@apply h-5 w-auto;
+			}
+			&.has-close {
+				@apply pr-1.5;
+			}
 		}
-	}
 
-	.chip.has-shadow {
-		@apply shadow-sm;
-	}
-
-	.chip.is-solid.is-primary {
-		@apply bg-primary text-on-primary;
-	}
-
-	.chip.is-solid.is-secondary {
-		@apply bg-secondary text-on-secondary;
-	}
-
-	.chip.is-solid.is-muted {
-		@apply bg-on-muted text-muted;
-	}
-
-	.chip.is-solid.is-success {
-		@apply bg-success text-on-success;
-	}
-
-	.chip.is-solid.is-warning {
-		@apply bg-warning text-on-warning;
-	}
-
-	.chip.is-solid.is-danger {
-		@apply bg-danger text-on-danger;
-	}
-
-	.chip.is-solid.is-info {
-		@apply bg-info text-on-info;
-	}
-
-	.chip.is-primary {
-		@apply bg-on-primary text-primary;
-	}
+		&.is-lg {
+			@apply h-10 gap-2 px-5 text-lg;
+			& .icon {
+				@apply h-6 w-auto;
+			}
+			&.has-close {
+				@apply pr-2;
+			}
+		}
 
-	.chip.is-secondary {
-		@apply bg-on-secondary text-secondary;
+		&.is-xl {
+			@apply h-12 gap-2 px-6 text-2xl;
+			& .icon {
+				@apply h-8 w-auto;
+			}
+			&.has-close {
+				@apply pr-2;
+			}
+		}
 	}
 
-	.chip.is-muted {
-		@apply bg-muted text-on-muted;
+	.chip-close {
+		@apply flex items-center justify-center;
+		@apply rounded-full cursor-pointer;
+		@apply opacity-70 hover:opacity-100;
+		@apply transition-opacity duration-200;
 	}
 
-	.chip.is-success {
-		@apply bg-on-success text-success;
+	.chip.is-soft {
+		&.is-primary {
+			@apply bg-on-primary text-primary;
+		}
+		&.is-secondary {
+			@apply bg-on-secondary text-secondary;
+		}
+		&.is-muted {
+			@apply bg-muted text-on-muted;
+		}
+		&.is-success {
+			@apply bg-on-success text-success;
+		}
+		&.is-info {
+			@apply bg-on-info text-info;
+		}
+		&.is-warning {
+			@apply bg-on-warning text-warning;
+		}
+		&.is-danger {
+			@apply bg-on-danger text-danger;
+		}
 	}
 
-	.chip.is-warning {
-		@apply bg-on-warning text-warning;
+	.chip.is-solid {
+		&.is-primary {
+			@apply bg-primary text-on-primary;
+		}
+		&.is-secondary {
+			@apply bg-secondary text-on-secondary;
+		}
+		&.is-muted {
+			@apply bg-on-muted text-muted;
+		}
+		&.is-success {
+			@apply bg-success text-on-success;
+		}
+		&.is-info {
+			@apply bg-info text-on-info;
+		}
+		&.is-warning {
+			@apply bg-warning text-on-warning;
+		}
+		&.is-danger {
+			@apply bg-danger text-on-danger;
+		}
 	}
 
-	.chip.is-danger {
-		@apply bg-on-danger text-danger;
+	.chip.is-outlined {
+		&.is-primary {
+			@apply inset-ring-2 inset-ring-primary text-primary;
+		}
+		&.is-secondary {
+			@apply inset-ring-2 inset-ring-secondary text-secondary;
+		}
+		&.is-muted {
+			@apply inset-ring-2 inset-ring-on-muted text-on-muted;
+		}
+		&.is-success {
+			@apply inset-ring-2 inset-ring-success text-success;
+		}
+		&.is-info {
+			@apply inset-ring-2 inset-ring-info text-info;
+		}
+		&.is-warning {
+			@apply inset-ring-2 inset-ring-warning text-warning;
+		}
+		&.is-danger {
+			@apply inset-ring-2 inset-ring-danger text-danger;
+		}
 	}
 
-	.chip.is-info {
-		@apply bg-on-info text-info;
+	.chip.is-overlay {
+		&.is-primary {
+			@apply bg-on-primary/60 text-primary;
+		}
+		&.is-secondary {
+			@apply bg-on-secondary/60 text-secondary;
+		}
+		&.is-muted {
+			@apply bg-muted/60 text-on-muted;
+		}
+		&.is-success {
+			@apply bg-on-success/60 text-success;
+		}
+		&.is-info {
+			@apply bg-on-info/60 text-info;
+		}
+		&.is-warning {
+			@apply bg-on-warning/60 text-warning;
+		}
+		&.is-danger {
+			@apply bg-on-danger/60 text-danger;
+		}
 	}
 }

package/dist/display/css/code.css

@@ -6,7 +6,7 @@
 	}
 
 	.code-content {
-		@apply size-full overflow-auto rounded-md;
+		@apply size-full overflow-auto rounded-box;
 		background-color: inherit;
 	}
 
@@ -14,12 +14,8 @@
 		@apply absolute top-2 right-2 flex justify-end items-center gap-2 z-10;
 	}
 
-	.code-lang {
-		@apply text-sm font-medium text-on-muted;
-	}
-
 	.shiki {
-		@apply p-3 rounded-ui;
+		@apply p-3 rounded-box;
 		min-width: fit-content;
 	}
 }