⚗️ Implement bot v2 MVP (#194)

Closes #190
2022-12-22 17:02:34 +01:00
parent e55823e011
commit 1a3869ae6d
202 changed files with 8060 additions and 1152 deletions
--- a/packages/js/src/assets/index.css
+++ b/packages/js/src/assets/index.css
@ -0,0 +1,225 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:host,
+:root {
+  --typebot-container-bg-image: none;
+  --typebot-container-bg-color: transparent;
+  --typebot-container-font-family: 'Open Sans';
+
+  --typebot-button-bg-color: #0042da;
+  --typebot-button-color: #ffffff;
+
+  --typebot-host-bubble-bg-color: #f7f8ff;
+  --typebot-host-bubble-color: #303235;
+
+  --typebot-guest-bubble-bg-color: #ff8e21;
+  --typebot-guest-bubble-color: #ffffff;
+
+  --typebot-input-bg-color: #ffffff;
+  --typebot-input-color: #303235;
+  --typebot-input-placeholder-color: #9095a0;
+
+  --typebot-header-bg-color: #ffffff;
+  --typebot-header-color: #303235;
+
+  /* Phone input */
+  --PhoneInputCountryFlag-borderColor: transparent;
+  --PhoneInput-color--focus: transparent;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollable-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.scrollable-container {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.text-fade-in {
+  transition: opacity 400ms ease-in 200ms;
+}
+
+.bubble-typing {
+  transition: width 400ms ease-out, height 400ms ease-out;
+}
+
+.bubble1,
+.bubble2,
+.bubble3 {
+  background-color: var(--typebot-host-bubble-color);
+  opacity: 0.5;
+}
+
+.bubble1 {
+  animation: chatBubbles 1s ease-in-out infinite;
+}
+
+.bubble2 {
+  animation: chatBubbles 1s ease-in-out infinite;
+  animation-delay: 0.3s;
+}
+
+.bubble3 {
+  animation: chatBubbles 1s ease-in-out infinite;
+  animation-delay: 0.5s;
+}
+
+@keyframes chatBubbles {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+button,
+input,
+textarea {
+  font-weight: 300;
+}
+
+.slate-a {
+  text-decoration: underline;
+}
+
+.slate-html-container > div {
+  min-height: 24px;
+}
+
+.slate-bold {
+  font-weight: bold;
+}
+
+.slate-italic {
+  font-style: oblique;
+}
+
+.slate-underline {
+  text-decoration: underline;
+}
+
+.text-input::-webkit-input-placeholder {
+  color: var(--typebot-input-placeholder-color) !important;
+  opacity: 1 !important;
+}
+.text-input::-moz-placeholder {
+  color: var(--typebot-input-placeholder-color) !important;
+  opacity: 1 !important;
+}
+.text-input::placeholder {
+  color: var(--typebot-input-placeholder-color) !important;
+  opacity: 1 !important;
+}
+
+.typebot-container {
+  background-image: var(--typebot-container-bg-image);
+  background-color: var(--typebot-container-bg-color);
+  font-family: var(--typebot-container-font-family), -apple-system,
+    BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+.custom-header {
+  color: var(--typebot-header-color);
+  background-color: var(--typebot-header-bg-color);
+}
+
+.typebot-button {
+  color: var(--typebot-button-color);
+  background-color: var(--typebot-button-bg-color);
+  border: 1px solid var(--typebot-button-bg-color);
+}
+
+.typebot-button.selectable {
+  color: var(--typebot-host-bubble-color);
+  background-color: var(--typebot-host-bubble-bg-color);
+  border: 1px solid var(--typebot-button-bg-color);
+}
+
+.typebot-host-bubble {
+  color: var(--typebot-host-bubble-color);
+}
+
+.typebot-host-bubble > .bubble-typing {
+  background-color: var(--typebot-host-bubble-bg-color);
+  border: var(--typebot-host-bubble-border);
+}
+
+.typebot-guest-bubble {
+  color: var(--typebot-guest-bubble-color);
+  background-color: var(--typebot-guest-bubble-bg-color);
+}
+
+.typebot-input {
+  color: var(--typebot-input-color);
+  background-color: var(--typebot-input-bg-color);
+  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.typebot-input-error-message {
+  color: var(--typebot-input-color);
+}
+
+.typebot-button > .send-icon {
+  fill: var(--typebot-button-color);
+}
+
+.typebot-chat-view {
+  max-width: 800px;
+}
+
+.ping span {
+  background-color: var(--typebot-button-bg-color);
+}
+
+.rating-icon-container svg {
+  width: 42px;
+  height: 42px;
+  stroke: var(--typebot-button-bg-color);
+  fill: var(--typebot-host-bubble-bg-color);
+  transition: fill 100ms ease-out;
+}
+
+.rating-icon-container.selected svg {
+  fill: var(--typebot-button-bg-color);
+}
+
+.rating-icon-container:hover svg {
+  filter: brightness(0.9);
+}
+
+.rating-icon-container:active svg {
+  filter: brightness(0.75);
+}
+
+.upload-progress-bar {
+  background-color: var(--typebot-button-bg-color);
+}
+
+.total-files-indicator {
+  background-color: var(--typebot-button-bg-color);
+  color: var(--typebot-button-color);
+  font-size: 10px;
+}
+
+.typebot-upload-input {
+  transition: border-color 100ms ease-out;
+}
+
+.typebot-upload-input.dragging-over {
+  border-color: var(--typebot-button-bg-color);
+}
+
+.secondary-button {
+  background-color: var(--typebot-host-bubble-bg-color);
+  color: var(--typebot-host-bubble-color);
+}