@nickle/chatbot-react 0.1.0

package/src/styles.css

@@ -0,0 +1,257 @@
+@tailwind components;
+@tailwind utilities;
+
+[data-chatbot-root] {
+  font-family: var(--cb-font-family);
+}
+
+[data-chatbot-root] * {
+  box-sizing: border-box;
+}
+
+[data-chatbot-root] button,
+[data-chatbot-root] input,
+[data-chatbot-root] textarea,
+[data-chatbot-root] select {
+  -webkit-appearance: none;
+  appearance: none;
+  border: 0;
+  box-shadow: none;
+  font: inherit;
+}
+
+[data-chatbot-root] input,
+[data-chatbot-root] textarea,
+[data-chatbot-root] select {
+  background: none;
+  color: inherit;
+}
+
+[data-chatbot-root] button {
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+[data-chatbot-root] button:disabled {
+  cursor: not-allowed;
+}
+
+[data-chatbot-root] textarea::placeholder {
+  color: var(--cb-muted-foreground);
+  opacity: 1;
+  font: inherit;
+}
+
+.cb-message-text {
+  word-break: normal;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+.cb-message-text pre,
+.cb-message-text code {
+  word-break: normal;
+  overflow-wrap: normal;
+  hyphens: manual;
+}
+
+.cb-composer-input {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--cb-border) 85%, #000000 15%) transparent;
+}
+
+.cb-composer-input::-webkit-scrollbar {
+  width: 10px;
+}
+
+.cb-composer-input::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cb-composer-input::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--cb-border) 85%, #000000 15%);
+  border: 2px solid transparent;
+  background-clip: content-box;
+  border-radius: 999px;
+}
+
+.cb-composer-input::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--cb-muted-foreground) 65%, #000000 35%);
+}
+
+.cb-chat-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--cb-border) 85%, #000000 15%) transparent;
+  scrollbar-gutter: stable;
+}
+
+.cb-chat-scroll::-webkit-scrollbar {
+  width: 10px;
+}
+
+.cb-chat-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.cb-chat-scroll::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--cb-border) 85%, #000000 15%);
+  border: 3px solid transparent;
+  background-clip: content-box;
+  border-radius: 999px;
+}
+
+.cb-chat-scroll::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--cb-muted-foreground) 65%, #000000 35%);
+}
+
+.cb-markdown p,
+.cb-markdown ul,
+.cb-markdown ol,
+.cb-markdown pre,
+.cb-markdown blockquote,
+.cb-markdown table {
+  margin: 0.2rem 0;
+}
+
+.cb-markdown h1,
+.cb-markdown h2,
+.cb-markdown h3,
+.cb-markdown h4,
+.cb-markdown h5,
+.cb-markdown h6 {
+  font-weight: 600;
+  margin: 0.3rem 0;
+  line-height: 1.35;
+}
+
+.cb-markdown > :first-child {
+  margin-top: 0;
+}
+
+.cb-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.cb-markdown h1 {
+  font-size: 1.1rem;
+}
+
+.cb-markdown h2 {
+  font-size: 1rem;
+}
+
+.cb-markdown h3,
+.cb-markdown h4,
+.cb-markdown h5,
+.cb-markdown h6 {
+  font-size: 0.95rem;
+}
+
+.cb-markdown ul,
+.cb-markdown ol {
+  padding-left: 1.2rem;
+}
+
+.cb-markdown a {
+  text-decoration: underline;
+  color: var(--cb-primary);
+}
+
+.cb-markdown code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
+  background-color: color-mix(in srgb, var(--cb-muted) 70%, transparent);
+  border-radius: 0.35rem;
+  padding: 0.1rem 0.3rem;
+  font-size: 0.85em;
+}
+
+.cb-markdown pre {
+  overflow-x: auto;
+  border-radius: 0.8rem;
+  border: 1px solid var(--cb-border);
+  background: color-mix(in srgb, var(--cb-muted) 60%, transparent);
+  padding: 0.65rem 0.75rem;
+}
+
+.cb-markdown pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.cb-markdown blockquote {
+  border-left: 2px solid var(--cb-border);
+  padding-left: 0.75rem;
+  color: var(--cb-muted-foreground);
+}
+
+.cb-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.cb-markdown th,
+.cb-markdown td {
+  border: 1px solid var(--cb-border);
+  padding: 0.35rem 0.45rem;
+  text-align: left;
+}
+
+@keyframes cb-slide-fade-in-left {
+  from {
+    opacity: 0;
+    transform: translate3d(-14px, 8px, 0) scale(0.985);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes cb-slide-fade-in-right {
+  from {
+    opacity: 0;
+    transform: translate3d(14px, 8px, 0) scale(0.985);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes cb-dots {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.35;
+  }
+
+  40% {
+    transform: translateY(-2px);
+    opacity: 0.9;
+  }
+}
+
+.cb-animate-cb-slide-fade-in-left {
+  animation: cb-slide-fade-in-left 300ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.cb-animate-cb-slide-fade-in-right {
+  animation: cb-slide-fade-in-right 300ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.cb-animate-cb-dots {
+  animation: cb-dots 1s infinite ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-chatbot-root] * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}