@makolabs/ripple
Version:
Simple Svelte 5 powered component library ✨
65 lines (64 loc) • 2.86 kB
JavaScript
import { tv } from 'tailwind-variants';
import { Color } from '../variants.js';
export const aiChatInterface = tv({
slots: {
userMessage: 'max-w-[70%] ml-auto px-4 py-3 rounded-3xl text-sm leading-relaxed shadow-lg',
aiMessage: 'max-w-[80%] mr-auto px-4 py-3 rounded-3xl text-sm leading-relaxed bg-white border border-default-200 text-default-900 shadow-sm',
sendButton: 'flex-shrink-0 w-11 h-11 rounded-full flex items-center justify-center transition-all duration-200 shadow-sm hover:shadow-md',
background: ''
},
variants: {
color: {
[Color.DEFAULT]: {
userMessage: 'bg-default-900 text-white',
sendButton: 'bg-default-900 hover:bg-default-800 text-white disabled:bg-default-300 disabled:text-default-500',
background: 'bg-default-50'
},
[Color.PRIMARY]: {
userMessage: 'bg-primary-600 text-white',
sendButton: 'bg-primary-600 hover:bg-primary-700 text-white disabled:bg-primary-300 disabled:text-primary-100',
background: 'bg-blue-50'
},
[Color.SECONDARY]: {
userMessage: 'bg-secondary-600 text-white',
sendButton: 'bg-secondary-600 hover:bg-secondary-700 text-white disabled:bg-secondary-300 disabled:text-secondary-100',
background: 'bg-purple-50'
},
[Color.SUCCESS]: {
userMessage: 'bg-success-600 text-white',
sendButton: 'bg-success-600 hover:bg-success-700 text-white disabled:bg-success-300 disabled:text-success-100',
background: 'bg-green-50'
},
[Color.WARNING]: {
userMessage: 'bg-warning-600 text-white',
sendButton: 'bg-warning-600 hover:bg-warning-700 text-white disabled:bg-warning-300 disabled:text-warning-100',
background: 'bg-yellow-50'
},
[Color.DANGER]: {
userMessage: 'bg-danger-600 text-white',
sendButton: 'bg-danger-600 hover:bg-danger-700 text-white disabled:bg-danger-300 disabled:text-danger-100',
background: 'bg-danger-50'
},
[Color.INFO]: {
userMessage: 'bg-info-600 text-white',
sendButton: 'bg-info-600 hover:bg-info-700 text-white disabled:bg-info-300 disabled:text-info-100',
background: 'bg-cyan-50'
}
},
loading: {
true: {
sendButton: 'cursor-not-allowed'
}
},
disabled: {
true: {
sendButton: 'cursor-not-allowed opacity-50'
}
}
},
defaultVariants: {
color: 'primary',
loading: false,
disabled: false
}
});