quickblox-react-ui-kit 0.2.0 → 0.2.1

package/src/Presentation/components/UI/Dialogs/MessagesView/InComingMessage/InComingMessage.scss

@@ -0,0 +1,394 @@
+.message-view-container--incoming-message-wrapper--context-menu{
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-width: 35px;
+}
+
+.widget-ai-translate-with-choice-languages-container{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  &--default-language{
+    cursor: pointer;
+  }
+  &--separator{
+    margin-left: 10px;
+    margin-right: 5px;
+  }
+
+  &--select-language{
+    cursor: pointer;
+  }
+}
+
+// --------
+.incoming-text-message,
+.incoming-text-message * {
+  box-sizing: border-box;
+}
+.incoming-text-message {
+  background: var(--primary-primary-a-100, #ffffff);
+  padding: 0px 16px 8px 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  width: 680px;
+  position: relative;
+}
+//.incoming {
+//  display: flex;
+//  flex-direction: column;
+//  gap: 2px;
+//  align-items: flex-start;
+//  justify-content: flex-end;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+//.name {
+//  padding: 0px 16px 0px 16px;
+//  display: flex;
+//  flex-direction: row;
+//  gap: 8px;
+//  align-items: flex-start;
+//  justify-content: flex-start;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+//.caption {
+//  display: flex;
+//  flex-direction: row;
+//  gap: 0px;
+//  align-items: center;
+//  justify-content: flex-start;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+//.name2 {
+//  color: var(--secondary-secondary-300, #636d78);
+//  text-align: left;
+//  font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
+//  position: relative;
+//}
+//.message {
+//  display: flex;
+//  flex-direction: row;
+//  gap: 8px;
+//  align-items: flex-end;
+//  justify-content: flex-start;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+//.bubble {
+//  display: flex;
+//  flex-direction: column;
+//  gap: 4px;
+//  align-items: flex-end;
+//  justify-content: flex-end;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+//.bubble-w {
+//  display: flex;
+//  flex-direction: row;
+//  align-items: flex-end;
+//  justify-content: flex-end;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+//.chat-bubble-background {
+//  background: var(--secondary-secondary-50, #e4e6e8);
+//  border-radius: 22px 22px 22px 0px;
+//  padding: 8px 12px 8px 12px;
+//  display: flex;
+//  flex-direction: row;
+//  gap: 10px;
+//  align-items: flex-start;
+//  justify-content: flex-start;
+//  flex-shrink: 0;
+//  position: relative;
+//  min-width: 120px;
+//  max-width: 480px;
+//}
+//.message-in-a-single-line {
+//  color: var(--secondary-secondary-900, #0b121b);
+//  text-align: left;
+//  font: var(--body-body-medium, 400 14px/20px "Roboto", sans-serif);
+//  position: relative;
+//  display: flex;
+//  align-items: center;
+//  justify-content: flex-start;
+//}
+//.translate {
+//  padding: 0px 12px 0px 0px;
+//  display: flex;
+//  flex-direction: row;
+//  gap: 8px;
+//  align-items: center;
+//  justify-content: flex-end;
+//  align-self: stretch;
+//  flex-shrink: 0;
+//  position: relative;
+//  // margin-right: 32px;
+//}
+//.caption2 {
+//  display: flex;
+//  flex-direction: row;
+//  gap: 0px;
+//  align-items: center;
+//  justify-content: flex-end;
+//  flex: 1;
+//  position: relative;
+//}
+//.time {
+//  color: var(--secondary-secondary-300, #636d78);
+//  text-align: right;
+//  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+//  position: relative;
+//}
+//.ai-translate-action {
+//  color: var(--secondary-secondary-300, #636d78);
+//  text-align: right;
+//  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+//  position: relative;
+//  cursor: pointer;
+//}
+//.icon {
+//  border-radius: 4px;
+//  display: flex;
+//  flex-direction: row;
+//  gap: 0px;
+//  align-items: center;
+//  justify-content: center;
+//  flex-shrink: 0;
+//  width: 16px;
+//  height: 16px;
+//  position: relative;
+//}
+//.media-translate {
+//  align-self: stretch;
+//  flex: 1;
+//  position: relative;
+//  overflow: visible;
+//}
+//.caption3 {
+//  padding: 0px 0px 16px 0px;
+//  display: flex;
+//  flex-direction: row;
+//  gap: 0px;
+//  align-items: flex-start;
+//  justify-content: flex-start;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+
+.incoming {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  position: relative;
+}
+.name {
+  padding: 0px 16px 0px 16px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.caption {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.name2 {
+  color: var(--secondary-secondary-300, #636d78);
+  text-align: left;
+  font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
+  position: relative;
+}
+.message {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.bubble {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  position: relative;
+}
+.chat-bubble-background {
+  background: var(--secondary-secondary-50, #e4e6e8);
+  border-radius: 22px 22px 22px 0px;
+  padding: 8px 12px 8px 12px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+  min-width: 120px;
+  max-width: 480px;
+}
+.message-in-a-single-line {
+  color: var(--secondary-secondary-900, #0b121b);
+  text-align: left;
+  font: var(--body-body-medium, 400 14px/20px "Roboto", sans-serif);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.translate {
+  padding: 0px 12px 0px 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+.caption2 {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+  position: relative;
+}
+.time {
+  color: var(--secondary-secondary-300, #636d78);
+  text-align: right;
+  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  position: relative;
+}
+.icon {
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  position: relative;
+}
+.media-translate {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+.assist-answer {
+  padding: 0px 0px 16px 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+.icon2 {
+  border-radius: 4px;
+  padding: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  position: relative;
+}
+.status-loader {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+.caption3 {
+  padding: 0px 0px 16px 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.ai-translate-action {
+  color: var(--secondary-secondary-300, #636d78);
+  text-align: right;
+  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  position: relative;
+  cursor: pointer;
+}
+
+
+// --- AIAssist
+.assist-answer {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+  cursor: pointer;
+}
+.icon {
+  border-radius: 4px;
+  padding: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  position: relative;
+}
+.actions-assist-answer {
+  padding: 5px 3px 5px 3px;
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+
+
+//