@nickle/chatbot-react 0.1.1 → 0.1.3

package/src/styles.css

@@ -104,60 +104,86 @@
   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 {
+[data-chatbot-root] .cb-markdown {
+  line-height: 1.5;
+  color: inherit;
+}
+
+[data-chatbot-root] .cb-markdown p,
+[data-chatbot-root] .cb-markdown ul,
+[data-chatbot-root] .cb-markdown ol,
+[data-chatbot-root] .cb-markdown pre,
+[data-chatbot-root] .cb-markdown blockquote,
+[data-chatbot-root] .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 {
+[data-chatbot-root] .cb-markdown h1,
+[data-chatbot-root] .cb-markdown h2,
+[data-chatbot-root] .cb-markdown h3,
+[data-chatbot-root] .cb-markdown h4,
+[data-chatbot-root] .cb-markdown h5,
+[data-chatbot-root] .cb-markdown h6 {
   font-weight: 600;
   margin: 0.3rem 0;
   line-height: 1.35;
 }
 
-.cb-markdown > :first-child {
+[data-chatbot-root] .cb-markdown > :first-child {
   margin-top: 0;
 }
 
-.cb-markdown > :last-child {
+[data-chatbot-root] .cb-markdown > :last-child {
   margin-bottom: 0;
 }
 
-.cb-markdown h1 {
+[data-chatbot-root] .cb-markdown h1 {
   font-size: 1.1rem;
 }
 
-.cb-markdown h2 {
+[data-chatbot-root] .cb-markdown h2 {
   font-size: 1rem;
 }
 
-.cb-markdown h3,
-.cb-markdown h4,
-.cb-markdown h5,
-.cb-markdown h6 {
+[data-chatbot-root] .cb-markdown h3,
+[data-chatbot-root] .cb-markdown h4,
+[data-chatbot-root] .cb-markdown h5,
+[data-chatbot-root] .cb-markdown h6 {
   font-size: 0.95rem;
 }
 
-.cb-markdown ul,
-.cb-markdown ol {
+[data-chatbot-root] .cb-markdown ul,
+[data-chatbot-root] .cb-markdown ol {
   padding-left: 1.2rem;
 }
 
-.cb-markdown a {
+[data-chatbot-root] .cb-markdown ul {
+  list-style: disc;
+}
+
+[data-chatbot-root] .cb-markdown ol {
+  list-style: decimal;
+}
+
+[data-chatbot-root] .cb-markdown li {
+  margin: 0.12rem 0;
+}
+
+[data-chatbot-root] .cb-markdown strong {
+  font-weight: 700;
+}
+
+[data-chatbot-root] .cb-markdown em {
+  font-style: italic;
+}
+
+[data-chatbot-root] .cb-markdown a {
   text-decoration: underline;
   color: var(--cb-primary);
+  word-break: break-word;
 }
 
-.cb-markdown code {
+[data-chatbot-root] .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;
@@ -165,7 +191,7 @@
   font-size: 0.85em;
 }
 
-.cb-markdown pre {
+[data-chatbot-root] .cb-markdown pre {
   overflow-x: auto;
   border-radius: 0.8rem;
   border: 1px solid var(--cb-border);
@@ -173,30 +199,42 @@
   padding: 0.65rem 0.75rem;
 }
 
-.cb-markdown pre code {
+[data-chatbot-root] .cb-markdown pre code {
   background: transparent;
   padding: 0;
 }
 
-.cb-markdown blockquote {
+[data-chatbot-root] .cb-markdown blockquote {
   border-left: 2px solid var(--cb-border);
   padding-left: 0.75rem;
   color: var(--cb-muted-foreground);
 }
 
-.cb-markdown table {
+[data-chatbot-root] .cb-markdown table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.875rem;
 }
 
-.cb-markdown th,
-.cb-markdown td {
+[data-chatbot-root] .cb-markdown th,
+[data-chatbot-root] .cb-markdown td {
   border: 1px solid var(--cb-border);
   padding: 0.35rem 0.45rem;
   text-align: left;
 }
 
+[data-chatbot-root] .cb-markdown img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+}
+
+[data-chatbot-root] .cb-markdown hr {
+  border: 0;
+  border-top: 1px solid var(--cb-border);
+  margin: 0.45rem 0;
+}
+
 @keyframes cb-slide-fade-in-left {
   from {
     opacity: 0;
@@ -247,6 +285,55 @@
   animation: cb-dots 1s infinite ease-in-out;
 }
 
+.cb-panel-transition {
+  transition-property: opacity, transform, width, height, top, left, right, bottom;
+  transition-duration: 380ms;
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: opacity, transform;
+}
+
+.cb-panel-open {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.cb-panel-closed {
+  opacity: 0;
+  transform: translate3d(0, 12px, 0) scale(0.9);
+}
+
+.cb-launcher-icon-transition {
+  transition-property: transform, opacity;
+  transition-duration: 300ms;
+  transition-timing-function: ease-out;
+}
+
+.cb-launcher-icon-base {
+  transform-origin: center;
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+}
+
+.cb-launcher-icon-closed-closed {
+  opacity: 1;
+  transform: rotate(0deg);
+}
+
+.cb-launcher-icon-closed-open {
+  opacity: 0;
+  transform: rotate(90deg);
+}
+
+.cb-launcher-icon-open-closed {
+  opacity: 0;
+  transform: rotate(-90deg);
+}
+
+.cb-launcher-icon-open-open {
+  opacity: 1;
+  transform: rotate(0deg);
+}
+
 @media (prefers-reduced-motion: reduce) {
   [data-chatbot-root] * {
     animation-duration: 0.01ms !important;