@automattic/agenttic-ui/dist/index.css

UI components for the Agenttic framework

.agenttic{--color-background: oklch(.99 0 0);--color-foreground: oklch(.241 0 0);--color-primary: oklch(.53 .22 268.05);--color-primary-foreground: oklch(1 0 0);--color-ring: var(--color-primary);--color-destructive: oklch(.492 .2095 28.09);--color-muted: color-mix(in srgb, var(--color-foreground) 10%, var(--color-background));--color-muted-foreground: color-mix(in srgb, var(--color-background) 40%, var(--color-foreground));--color-success: rgba(74, 184, 102, .04);--color-success-icon: #2C723E;--color-warning: rgba(240, 184, 73, .04);--color-warning-icon: #A77F30;--color-error: rgba(204, 24, 24, .04);--color-error-icon: #8C0B0B;--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-weight-medium: 450;--font-weight-semibold: 500;--text-sm: .875rem;--text-sm--line-height: 1.65;--text-base: .9375rem;--text-base--line-height: 1.625;--text-base--tracking: -.01em;--spacing: .25rem;--spacing-1: var(--spacing);--spacing-1\.5: calc(var(--spacing) * 1.5);--spacing-2: calc(var(--spacing) * 2);--spacing-3: calc(var(--spacing) * 3);--spacing-3\.5: calc(var(--spacing) * 3.5);--spacing-4: calc(var(--spacing) * 4);--spacing-5: calc(var(--spacing) * 5);--spacing-6: calc(var(--spacing) * 6);--spacing-7: calc(var(--spacing) * 7);--spacing-8: calc(var(--spacing) * 8);--spacing-9: calc(var(--spacing) * 9);--spacing-10: calc(var(--spacing) * 10);--spacing-20: calc(var(--spacing) * 20);--radius: 1rem;--radius-xs: calc(var(--radius) - 10px);--radius-sm: calc(var(--radius) - 8px);--radius-md: calc(var(--radius) - 2px);--radius-lg: var(--radius);--radius-xl: calc(var(--radius) + 8px);--radius-full: 9999px;--shadow-sm: 0 0 0 1px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 0 6px color-mix(in srgb, var(--color-foreground) 5%, transparent);--shadow-lg: 0 0 0 1px rgba(0, 0, 0, .075), 0 2px 24px rgba(0, 0, 0, .075);--shadow-outline: 0 0 0 1px color-mix(in srgb, var(--color-foreground) 10%, transparent);--shadow-outline-strong: 0 0 0 1px color-mix(in srgb, var(--color-foreground) 25%, transparent);--transition-colors: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1), fill .15s cubic-bezier(.4, 0, .2, 1), stroke .15s cubic-bezier(.4, 0, .2, 1)}@layer base{.agenttic *,.agenttic :before,.agenttic :after,.agenttic ::backdrop,.agenttic ::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}.agenttic *{outline-color:var(--color-ring)}.agenttic button,.agenttic input,.agenttic select,.agenttic optgroup,.agenttic textarea,.agenttic ::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;background-color:transparent;opacity:1}.agenttic input,.agenttic select,.agenttic optgroup,.agenttic textarea,.agenttic ::file-selector-button{color:inherit;border-radius:0}}.button-module_button{align-items:center;border-radius:var(--radius-sm);border:1px solid transparent;color:var(--color-foreground);cursor:pointer;display:inline-flex;flex-shrink:0;font-weight:var(--font-weight-medium);font-size:var(--text-sm);gap:calc(var(--spacing) * .5);justify-content:center;outline:none;transition:var(--transition-colors);letter-spacing:var(--text-base--tracking);white-space:nowrap;height:var(--spacing-8);padding:var(--spacing-2) var(--spacing-3)}.button-module_button:disabled{pointer-events:none;background-color:var(--color-muted);color:var(--color-muted-foreground)}.button-module_button:focus-visible{outline:2px solid var(--color-ring);outline-offset:1.5px}.button-module_pressed{color:var(--color-foreground)}.button-module_pressed svg{color:var(--color-foreground)}.button-module_primary{background-color:var(--color-primary);color:var(--color-primary-foreground)}.button-module_primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary) 85%,#000)}.button-module_ghost{background-color:transparent;color:var(--color-muted-foreground)}.button-module_ghost svg{color:var(--color-muted-foreground)}.button-module_ghost:hover:not(:disabled){background:transparent;color:var(--color-foreground)}.button-module_ghost:hover:not(:disabled) svg{color:var(--color-foreground)}.button-module_ghost:disabled{background:transparent;opacity:.66}.button-module_ghost:focus-visible{outline-offset:0}.button-module_ghost.button-module_pressed{color:var(--color-foreground)}.button-module_ghost.button-module_pressed svg{color:var(--color-foreground)}.button-module_outline{box-shadow:var(--shadow-outline);background-color:var(--color-background)}.button-module_outline:hover:not(:disabled){box-shadow:var(--shadow-outline-strong)}.button-module_outline:focus-visible{outline-offset:0}.button-module_outline:disabled{background-color:var(--color-background)}.button-module_outline.button-module_pressed{color:var(--color-foreground)}.button-module_outline.button-module_pressed svg{color:var(--color-foreground)}.button-module_transparent{background-color:color-mix(in srgb,var(--color-background) 95%,transparent);color:var(--color-foreground);box-shadow:var(--shadow-lg)}.button-module_transparent:hover:not(:disabled){background-color:var(--color-background);box-shadow:var(--shadow-lg)}.button-module_link{background-color:transparent;color:var(--color-primary);font-weight:var(--font-weight-semibold);padding-left:var(--spacing-2);padding-right:var(--spacing-2);width:auto}.button-module_link:hover:not(:disabled){color:color-mix(in srgb,var(--color-primary) 85%,#000)}.button-module_link.button-module_pressed{color:var(--color-primary)}.button-module_link.button-module_pressed svg{color:var(--color-primary)}.button-module_icon{border-radius:var(--radius-xs);height:var(--spacing-8);padding:0;width:var(--spacing-8)}.button-module_sm{border-radius:var(--radius-xs);gap:0;height:var(--spacing-6);padding:0;width:var(--spacing-6)}.button-module_sm svg{height:var(--spacing-6);width:var(--spacing-6)}.button-module_lg{height:var(--spacing-10);border-radius:var(--radius-md);font-size:var(--text-base);padding-left:var(--spacing-3\.5);padding-right:var(--spacing-3\.5)}.button-module_withTextAndIcon{padding-left:var(--spacing-1);width:inherit}.button-module_sm.button-module_withTextAndIcon{padding-left:0;padding-right:var(--spacing-1)}.button-module_button svg{flex-shrink:0;pointer-events:none}.CollapsedView-module_button{border-radius:var(--radius-lg);height:var(--spacing-10);width:var(--spacing-10)}.Textarea-module_textarea{display:flex;width:100%;border-radius:var(--radius-md);border:0;background-color:transparent;min-height:var(--spacing-10);padding:var(--spacing-2);scrollbar-width:none;resize:none}.Textarea-module_textarea::-moz-placeholder{color:var(--color-muted-foreground);font-weight:var(--font-weight-medium)}.Textarea-module_textarea::placeholder{color:var(--color-muted-foreground);font-weight:var(--font-weight-medium)}.Textarea-module_textarea:focus-visible{outline:none}.Textarea-module_textarea:disabled{cursor:not-allowed;opacity:.5}.ChatInput-module_container{display:flex;align-items:end;gap:var(--spacing)}.ChatInput-module_textareaContainer{position:relative;flex:1;width:100%}.ChatInput-module_actions{display:flex;flex-direction:row;padding-left:var(--spacing);padding-right:var(--spacing);height:var(--spacing-10);gap:var(--spacing);align-items:center}.ChatInput-module_button{border-radius:var(--radius-full)}.AnimatedPlaceholder-module_container{color:var(--color-muted-foreground);font-weight:var(--font-weight-medium);padding-left:var(--spacing-2);padding-right:var(--spacing-2);padding-top:var(--spacing-2);pointer-events:none;position:absolute;z-index:1}.Suggestions-module_container{position:absolute;top:0;left:0;right:0;display:flex;flex-wrap:nowrap;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-1\.5);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.Suggestions-module_container::-webkit-scrollbar{display:none}.Suggestions-module_vertical{flex-direction:column;gap:var(--spacing-1);overflow:visible;padding:1px;padding-bottom:var(--spacing-1);z-index:-1}.ChatHeader-module_container{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing);cursor:grab}.ChatHeader-module_container:active{cursor:grabbing}.Notice-module_container{position:relative;display:flex;align-items:center;padding:var(--spacing);padding-left:var(--spacing-3);gap:var(--spacing-3);background-color:var(--color-muted);border-radius:var(--radius-sm);color:var(--color-foreground);font-size:var(--text-sm);font-weight:var(--font-weight-medium);line-height:var(--text-sm--line-height)}.Notice-module_containerWithIcon{padding-left:var(--spacing-3)}.Notice-module_is-success{border:1px solid rgba(0,0,0,.1);background-color:var(--color-success)}.Notice-module_is-success svg path{fill:var(--color-success-icon)}.Notice-module_is-warning{border:1px solid rgba(0,0,0,.1);background-color:var(--color-warning)}.Notice-module_is-warning svg path{fill:var(--color-warning-icon)}.Notice-module_is-error{border:1px solid rgba(0,0,0,.1);background-color:var(--color-error)}.Notice-module_is-error svg path{fill:var(--color-error-icon)}.Notice-module_content{align-items:center;display:flex;flex:1;gap:var(--spacing);min-width:0}.Notice-module_actions{align-items:center;display:flex;flex-shrink:0;gap:var(--spacing)}.Notice-module_icon{align-items:center;display:flex;flex-shrink:0;justify-content:center}.Notice-module_icon svg{display:block;height:var(--spacing-5);width:var(--spacing-5)}.Notice-module_dismissible{position:absolute;top:calc(var(--spacing) * -1.5);right:calc(var(--spacing) * -1.5);opacity:0;transform:scale(.9);border-radius:var(--radius-full);transition:all .15s ease}.Notice-module_dismissible:focus,.Notice-module_dismissible:focus-visible,.Notice-module_container:hover .Notice-module_dismissible{opacity:1;transform:scale(1)}.Notice-module_dismissible svg{display:block;width:var(--spacing-4);height:var(--spacing-4);background-color:var(--color-muted-foreground);color:var(--color-background);border-radius:inherit;box-shadow:0 0 0 2.5px var(--color-background);opacity:.8}.Notice-module_dismissible:hover svg{opacity:1}.ChatFooter-module_container{background-color:var(--color-background);border-radius:calc(var(--radius-lg) + 1px);box-shadow:var(--shadow-sm);color:var(--color-foreground);display:flex;flex-direction:column;gap:var(--spacing-2);padding:var(--spacing-2);position:relative;z-index:10}.MessageActions-module_container{display:flex;align-items:center;margin-top:var(--spacing-2);gap:var(--spacing-1)}.MessageActions-module_container button[aria-hidden=true]{display:none}.Message-module_message{display:flex;align-items:flex-start;padding:0 var(--spacing-3);color:var(--color-foreground)}.Message-module_message.Message-module_user .Message-module_bubble{background-color:var(--color-muted);max-width:85%;padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-sm)}.Message-module_message.Message-module_error{color:var(--color-destructive)}.Message-module_content{flex:1;text-align:start;word-break:break-word;white-space:normal}.Message-module_message.Message-module_user .Message-module_content{display:flex;justify-content:flex-end}.Message-module_message p{text-wrap-style:pretty;margin-bottom:var(--spacing-3)}.Message-module_message a{color:var(--color-primary)}.Message-module_message p:last-child{margin-bottom:0}.Message-module_message strong{font-weight:var(--font-weight-semibold)}.Message-module_message ol,.Message-module_message ul{margin-bottom:var(--spacing-3);padding-left:var(--spacing-6)}.Message-module_message p+:where(ol,ul){margin-top:0}.Message-module_message li{margin-bottom:var(--spacing-2)}.Message-module_message li::marker{font-size:var(--text-sm)}.Message-module_message table{width:100%;margin:12px 0;border-collapse:collapse}.Message-module_message th,.Message-module_message td{padding:8px 12px;border:1px solid #ddd;text-align:left}.Message-module_message th{background-color:var(--color-muted);font-weight:600}.Messages-module_container{display:flex;flex-direction:column;flex:1;padding-top:var(--spacing-2);padding-bottom:var(--spacing-20);gap:var(--spacing-8);overflow-y:auto;height:100%;position:relative;z-index:10}.animating .Messages-module_container::-webkit-scrollbar{display:none}.Messages-module_container [data-role=user]:has(+[data-role=user]),.Messages-module_container [data-role=agent]:has(+[data-role=agent]){margin-bottom:calc(-1 * var(--spacing-6))}.Messages-module_emptyState{display:flex;flex-direction:column;align-items:center;justify-content:center}.Thinking-module_container{display:flex;align-items:center;gap:var(--spacing);padding:0 var(--spacing-2);color:var(--color-muted-foreground);font-size:var(--text-sm)}.Thinking-module_icon{display:flex;align-items:center;justify-content:center}.Thinking-module_icon svg{width:var(--spacing-6);height:var(--spacing-6)}.Thinking-module_content{background:linear-gradient(90deg,color-mix(in srgb,currentColor 30%,transparent),currentColor,color-mix(in srgb,currentColor 30%,transparent));background-size:200% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:Thinking-module_shimmer 2s infinite linear 0ms}@keyframes Thinking-module_shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.ConversationView-module_container{display:flex;flex-direction:column;height:100%;justify-content:flex-end}.ConversationView-module_container.ConversationView-module_withHeader{justify-content:space-between}.Chat-module_container{font-size:var(--text-base);line-height:var(--text-base--line-height);font-weight:400;font-family:var(--font-sans);letter-spacing:var(--text-base--tracking);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}.Chat-module_container.Chat-module_embedded{height:100%}.Chat-module_container.Chat-module_floating{position:fixed;z-index:50}.Chat-module_container.Chat-module_floating .Chat-module_content{background-color:var(--color-background);color:var(--color-foreground);overflow:hidden;min-height:56px;padding:var(--spacing-2);box-shadow:var(--shadow-lg)}