@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha12

package/src/styles/conversation.scss

@@ -0,0 +1,200 @@
+@use './variables.scss' as vars;
+@use './mixins.scss' as mixins;
+
+.wxchtf-conversation {
+  flex: auto;
+  display: flex;
+  flex-flow: row nowrap;
+  min-width: 0;
+
+  .wxchtf-conversation-main {
+    flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+    min-width: 0;
+
+    .wxchtf-conversation-header {
+      padding: 15px 20px;
+      line-height: 24px;
+      z-index: 2;
+      box-shadow: 0px 2px 4px 0px rgba(88, 99, 107, 0.04), 0px 1px 9px -1px rgba(88, 99, 107, 0.04),
+        0px 1px 2px 0px rgba(88, 99, 107, 0.06);
+
+      .wxchtf-conversation-name {
+        font-weight: 600;
+        font-size: 16px;
+        flex: none;
+
+        &.--editable {
+          cursor: pointer;
+        }
+      }
+
+      .wxchtf-conversation-actions {
+        display: inline-flex;
+      }
+
+      .wxchtf-chat-members {
+        display: inline-flex;
+        gap: 6px;
+      }
+    }
+
+    .wxchtf-conversation-body {
+      flex: 1 1 auto;
+      height: 100px;
+      overflow-y: auto;
+      background: white;
+      padding: 2rem 1rem;
+      padding-right: 1rem;
+      display: flex;
+      flex-flow: column-reverse nowrap;
+      align-items: center;
+
+      @include mixins.scrollbar();
+
+      .wxchtf-message,
+      .wxchtf-sending-message,
+      .wxchtf-system-message,
+      .wxchtf-message-skeleton {
+        margin-bottom: 8px;
+        max-width: vars.$messageBoxWidth;
+        width: 100%;
+
+        &:first-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .wxchtf-message,
+      .wxchtf-sending-message {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+
+        & > div {
+          min-width: 0;
+        }
+
+        &:not(.--my) {
+          .wxchtf-message-content,
+          .wxchtf-sending-message-content {
+            border-bottom-left-radius: 0;
+          }
+        }
+
+        &.--my {
+          direction: rtl;
+          justify-content: flex-start;
+
+          .wxchtf-message-author {
+            display: none;
+          }
+
+          .wxchtf-message-content,
+          .wxchtf-sending-message-content {
+            direction: ltr;
+            border-bottom-right-radius: 0;
+            background-color: vars.$myMessageBackground;
+          }
+
+          .wxchtf-message-info-box {
+            text-align: right;
+          }
+        }
+
+        .wxchtf-message-author {
+          margin-right: 15px;
+          flex: none;
+
+          .ant-avatar {
+            @include mixins.avatarSize(vars.$avatarSize);
+          }
+        }
+
+        .wxchtf-message-info-box,
+        .wxchtf-sending-message-info-box {
+          text-align: left;
+          margin-bottom: 3px;
+
+          .wxchtf-message-author-name,
+          .wxchtf-message-sent-at,
+          .wxchtf-message-read-box,
+          .wxchtf-sending-message-sending-box {
+            display: inline-block;
+            font-size: 0.85em;
+            opacity: 0.5;
+          }
+
+          .wxchtf-message-sent-at,
+          .wxchtf-message-read-box,
+          .wxchtf-sending-message-sending-box {
+            margin-left: 5px;
+          }
+        }
+
+        .wxchtf-message-content,
+        .wxchtf-sending-message-content {
+          width: fit-content;
+          min-width: 300px;
+          max-width: 70%;
+          padding: 12px 19px;
+          background: white;
+          background-color: vars.$messageBackground;
+          display: block;
+          white-space: pre-wrap;
+          overflow-wrap: break-word;
+          border-radius: 24px;
+
+          .wxchtf-message-text {
+            line-height: 21px;
+          }
+        }
+      }
+
+      .wxchtf-system-message {
+        font-style: italic;
+        position: relative;
+        text-align: center;
+        color: #0e0f1799;
+
+        .wxchtf-text,
+        .wxchtf-timestamp {
+          position: relative;
+          z-index: 1;
+          padding-inline: 8px;
+          display: inline-block;
+          font-size: 0.85em;
+          background-color: white;
+        }
+
+        .wxchtf-timestamp {
+          padding-left: 10px;
+        }
+      }
+
+      .wxchtf-message-skeleton {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-end;
+
+        .wxchtf-avatar {
+          margin-right: 15px;
+        }
+
+        .wxchtf-avatar .ant-skeleton-avatar {
+          width: vars.$avatarSize;
+          height: vars.$avatarSize;
+          line-height: vars.$avatarSize;
+        }
+
+        .wxchtf-content {
+          width: 300px;
+          height: 100px;
+          border-radius: vars.$messageBorderRadius;
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+  }
+}

package/src/styles/index.scss

@@ -1,110 +1,220 @@
-@use './variables.scss' as vars;
-@import './mixins.scss';
-@import './keyframes.scss';
-@import './aside.scss';
-@import './chat.scss';
-@import './input.scss';
-@import './members.scss';
-
-.wxchtf-chatify {
-  display: flex;
-  flex-flow: column nowrap;
-  background: vars.$background;
-  border-radius: vars.$radius;
-
-  .wxchtf-header {
-    min-height: 2rem;
-  }
-
-  .wxchtf-body {
-    flex: 1 0;
-    display: flex;
-    flex-flow: row nowrap;
-  }
-
-  .wxchtf-footer {
-    min-height: 2rem;
-  }
-
-  .wxchtf-add-btn-wrapper {
-    width: 100%;
-    text-align: right;
-    padding-inline: 0.5rem;
-    margin-bottom: 1rem;
-
-    .wxchtf-add-btn {
-      border: none;
-      background-color: #e4f7f7;
-      height: 50px;
-      padding: 0;
-      line-height: 50px;
-      min-width: 150px;
-      border-radius: 50px;
-      font-weight: 600;
-      opacity: 0.9;
-      box-shadow: none;
-    }
-  }
-}
-
-.wxchtf-main {
-  flex: auto;
-  display: flex;
-  flex-flow: column nowrap;
-  border-top-right-radius: vars.$radius;
-  border-bottom-right-radius: vars.$radius;
-  box-shadow: 0px 6px 30px 0px #0cd9e214, 0px 1px 12px 0px #006e720f;
-  z-index: 2;
-  min-width: 0;
-
-  .wxchtf-create-chat-panel {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    position: relative;
-
-    .wxchtf-create-chat-panel-close {
-      position: absolute;
-      right: 25px;
-      top: 25px;
-    }
-
-    form {
-      padding: 2rem;
-      max-width: 700px;
-      width: 100%;
-
-      .wxchtf-create-chat-member-input-list {
-        max-height: 15rem;
-        overflow-y: auto;
-        @include scrollbar();
-
-        .ant-list-item {
-          padding-inline: 0.5rem;
-
-          &.--selected {
-            background-color: #e6f4ff;
-          }
-
-          .ant-checkbox-wrapper {
-            width: 100%;
-
-            & > span:last-child {
-              flex: 1;
-
-              .ant-list-item-meta {
-                align-items: center;
-
-                .ant-list-item-meta-content h4 {
-                  margin-bottom: 0;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use './variables.scss' as vars;
+@use './mixins.scss' as mixins;
+@use './keyframes.scss';
+@use './aside.scss';
+@use './chat.scss';
+@use './input.scss';
+@use './members.scss';
+@use './chat-list.scss';
+@use './conversation.scss';
+
+.wxchtf-message.--my .wxchtf-file-list .wxchtf-file {
+  background-color: darken($color: vars.$myMessageBackground, $amount: 3%);
+}
+
+.wxchtf-message .wxchtf-message-text + .wxchtf-file-list {
+  margin-top: 1rem;
+}
+
+.wxchtf-message .wxchtf-file-list {
+  .wxchtf-file {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 1rem;
+    background-color: darken($color: vars.$messageBackground, $amount: 3%);
+    border-radius: 15px;
+    padding: 0.5rem;
+
+    .wxchtf-file-info {
+      min-width: 0;
+    }
+
+    .wxchtf-size {
+      color: vars.$strokeColor;
+      font-size: 0.8rem;
+    }
+
+    .wxchtf-name {
+      font-size: 0.9rem;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .ant-btn {
+      border: 2px solid vars.$linkColor;
+      border-radius: 50%;
+
+      &:hover {
+        border-color: lighten($color: vars.$linkColor, $amount: 15%);
+      }
+    }
+
+    & + .wxchtf-file {
+      margin-top: 1rem;
+    }
+  }
+}
+
+.wxchtf-chatify {
+  display: flex;
+  flex-flow: column nowrap;
+  background: vars.$background;
+  border-radius: vars.$radius;
+
+  .wxchtf-header {
+    min-height: 2rem;
+  }
+
+  .wxchtf-body {
+    flex: 1 0;
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .wxchtf-footer {
+    min-height: 2rem;
+  }
+
+  .wxchtf-add-btn-wrapper {
+    width: 100%;
+    text-align: right;
+    padding-inline: 0.5rem;
+    margin-bottom: 1rem;
+
+    .wxchtf-add-btn,
+    .wxchtf-add-btn-settings {
+      border: none;
+      background-color: #e4f7f7;
+      height: 50px;
+      line-height: 50px;
+      font-weight: 600;
+      opacity: 0.9;
+      box-shadow: none;
+    }
+
+    > .wxchtf-add-btn {
+      padding: 0 24px;
+      min-width: 150px;
+      border-radius: 50px;
+    }
+
+    > .wxchtf-add-btn-settings {
+      padding: 0 16px;
+      min-width: 50px;
+      border-radius: 50px;
+    }
+
+    > .wxchtf-add-btn-group {
+      display: inline-flex;
+
+      .wxchtf-add-btn-wrapper {
+        width: auto;
+        padding-inline: 0;
+        margin-bottom: 0;
+      }
+
+      .wxchtf-add-btn {
+        padding: 0 18px;
+        min-width: 120px;
+        border-radius: 50px 0 0 50px;
+      }
+
+      .wxchtf-add-btn-settings {
+        padding: 0 14px;
+        min-width: 44px;
+        border-radius: 0 50px 50px 0;
+        border-left: 1px solid rgba(0, 0, 0, 0.06);
+      }
+    }
+  }
+}
+
+.wxchtf-main {
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  border-top-right-radius: vars.$radius;
+  border-bottom-right-radius: vars.$radius;
+  box-shadow: 0px 6px 30px 0px #0cd9e214, 0px 1px 12px 0px #006e720f;
+  z-index: 2;
+  min-width: 0;
+
+  .wxchtf-create-chat-panel,
+  .wxchtf-auto-reply-panel {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    position: relative;
+
+    .wxchtf-create-chat-panel-close,
+    .wxchtf-auto-reply-panel-close {
+      position: absolute;
+      right: 25px;
+      top: 25px;
+    }
+
+    form {
+      padding: 2rem;
+      max-width: 700px;
+      width: 100%;
+    }
+  }
+
+  .wxchtf-auto-reply-panel {
+    .wxchtf-auto-reply-panel-header {
+      width: 100%;
+      max-width: 700px;
+      padding: 0 2rem;
+      margin-bottom: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      h3 {
+        margin: 0;
+      }
+
+      .wxchtf-auto-reply-panel-clear {
+        padding: 0;
+      }
+    }
+  }
+
+  .wxchtf-create-chat-panel {
+    form {
+      .wxchtf-create-chat-member-input-list {
+        max-height: 15rem;
+        overflow-y: auto;
+        @include mixins.scrollbar();
+
+        .ant-list-item {
+          padding-inline: 0.5rem;
+
+          &.--selected {
+            background-color: #e6f4ff;
+          }
+
+          .ant-checkbox-wrapper {
+            width: 100%;
+
+            & > span:last-child {
+              flex: 1;
+
+              .ant-list-item-meta {
+                align-items: center;
+
+                .ant-list-item-meta-content h4 {
+                  margin-bottom: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}