@webinex/chatify 1.0.2-rc3 → 2.0.0-build1

package/src/styles/chat.scss

@@ -1,109 +1,160 @@
+@use './variables.scss' as vars;
+
 .wxchtf-chatify {
-  .wxchtf-chat-panel {
+  .wxchtf-chat {
+    flex: auto;
+    display: flex;
+    flex-flow: row nowrap;
+    min-width: 1;
+  }
+
+  .wxchtf-conversation {
     flex: auto;
     display: flex;
     flex-flow: row nowrap;
+    min-width: 1;
 
-    .wxchtf-chat-main {
+    .wxchtf-conversation-main {
       flex: 1;
       display: flex;
       flex-flow: column nowrap;
+      min-width: 0;
 
-      .wxchtf-chat-header {
-        border-bottom: $border;
-        padding: 0.5rem 1rem;
+      .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-chat-name {
+        .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-chat-body {
+      .wxchtf-conversation-body {
         flex: 1 1 auto;
         height: 100px;
         overflow-y: auto;
-        background: $chatBodyBackground;
+        background: white;
         padding: 2rem 1rem;
+        padding-right: 1rem;
         display: flex;
         flex-flow: column-reverse nowrap;
+        align-items: center;
 
         @include scrollbar();
 
-        @media only screen and (min-width: 1120px) {
-          padding-right: 30%;
+        .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;
-          width: 100%;
-          align-items: flex-end;
+          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 {
-              margin-right: 0;
-              margin-left: 15px;
+              display: none;
             }
 
             .wxchtf-message-content,
             .wxchtf-sending-message-content {
               direction: ltr;
-              border-bottom-left-radius: 10px;
               border-bottom-right-radius: 0;
-              background-color: $myMessageBackground;
+              background-color: vars.$myMessageBackground;
+            }
+
+            .wxchtf-message-info-box {
+              text-align: right;
             }
           }
 
           .wxchtf-message-author {
             margin-right: 15px;
+            flex: none;
 
             .ant-avatar {
-              @include avatarSize($avatarSize);
-              box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+              @include 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%;
-            border-radius: $messageBorderRadius;
-            padding: 0.75rem 1rem;
+            padding: 12px 19px;
             background: white;
-            border-bottom-left-radius: 0;
-            background-color: $messageBackground;
-            box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+            background-color: vars.$messageBackground;
             display: block;
             white-space: pre-wrap;
             overflow-wrap: break-word;
+            border-radius: 24px;
 
-            .wxchtf-message-info-box,
-            .wxchtf-sending-message-info-box {
-              text-align: right;
-
-              .wxchtf-message-sent-at,
-              .wxchtf-message-read-box,
-              .wxchtf-sending-message-sending-box {
-                display: inline-block;
-                font-style: italic;
-                font-size: 0.75em;
-                margin-top: 0.5rem;
-                opacity: 0.5;
-              }
-
-              .wxchtf-message-read-box,
-              .wxchtf-sending-message-sending-box {
-                margin-left: 5px;
-              }
+            .wxchtf-message-text {
+              line-height: 21px;
             }
           }
         }
@@ -112,27 +163,20 @@
           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;
-            opacity: 0.9;
             font-size: 0.85em;
+            background-color: white;
           }
 
           .wxchtf-timestamp {
-            margin-left: 1rem;
-          }
-        }
-
-        .wxchtf-message,
-        .wxchtf-sending-message,
-        .wxchtf-system-message,
-        .wxchtf-message-skeleton {
-          margin-bottom: 2rem;
-
-          &:first-child {
-            margin-bottom: 0;
+            padding-left: 10px;
           }
         }
 
@@ -146,77 +190,19 @@
           }
 
           .wxchtf-avatar .ant-skeleton-avatar {
-            width: $avatarSize;
-            height: $avatarSize;
-            line-height: $avatarSize;
+            width: vars.$avatarSize;
+            height: vars.$avatarSize;
+            line-height: vars.$avatarSize;
           }
 
           .wxchtf-content {
             width: 300px;
             height: 100px;
-            border-radius: $messageBorderRadius;
+            border-radius: vars.$messageBorderRadius;
             border-bottom-left-radius: 0;
           }
         }
       }
-
-      .wxchtf-input-form {
-        flex: none;
-        max-height: 300px;
-        display: flex;
-        flex-flow: column nowrap;
-
-        .wxchtf-input-box {
-          flex: none;
-          display: flex;
-          flex-flow: row nowrap;
-          padding: 1rem 0;
-          border-top: $border;
-
-          @mixin iconBtn {
-            flex: none;
-            display: flex;
-            padding: 0 1rem;
-            align-items: flex-end;
-
-            .ant-btn.ant-btn-icon-only .anticon {
-              font-size: 1.5rem;
-            }
-          }
-
-          .wxchtf-add-files-box {
-            @include iconBtn();
-          }
-
-          .wxchtf-text-input-box {
-            flex: auto;
-
-            textarea {
-              resize: none;
-              border: none;
-              outline: none;
-              box-shadow: none;
-
-              @include scrollbar();
-            }
-          }
-
-          .wxchtf-submit-btn-box {
-            @include iconBtn();
-          }
-        }
-      }
-    }
-
-    .wxchtf-chat-members-panel {
-      min-width: 300px;
-      border-left: $border;
-
-      .wxchtf-chat-members-list {
-        .wxchtf-chat-members-list-item {
-          padding-inline: 1rem;
-        }
-      }
     }
   }
 }

package/src/styles/index.scss

@@ -1,20 +1,19 @@
-@import './variables.scss';
+@use './variables.scss' as vars;
 @import './mixins.scss';
 @import './keyframes.scss';
 @import './aside.scss';
-@import './settings.scss';
 @import './chat.scss';
+@import './input.scss';
+@import './members.scss';
 
 .wxchtf-chatify {
-  border: $border;
   display: flex;
   flex-flow: column nowrap;
-  background: $background;
-  border-radius: $radius;
+  background: vars.$background;
+  border-radius: vars.$radius;
 
   .wxchtf-header {
     min-height: 2rem;
-    border-bottom: $border;
   }
 
   .wxchtf-body {
@@ -25,7 +24,26 @@
 
   .wxchtf-footer {
     min-height: 2rem;
-    border-top: $border;
+  }
+
+  .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;
+    }
   }
 }
 
@@ -33,13 +51,25 @@
   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 {
+  .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;
@@ -49,6 +79,7 @@
       .wxchtf-create-chat-member-input-list {
         max-height: 15rem;
         overflow-y: auto;
+        @include scrollbar();
 
         .ant-list-item {
           padding-inline: 0.5rem;

package/src/styles/input.scss

@@ -0,0 +1,74 @@
+@use './variables.scss' as vars;
+
+.wxchtf-input-form {
+  flex: none;
+  max-height: 300px;
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 12px 20px 20px 20px;
+
+  .wxchtf-input-box {
+    flex: none;
+    display: flex;
+    flex-flow: row nowrap;
+    padding: 8px;
+    max-width: vars.$messageBoxWidth;
+    width: 100%;
+    margin: auto;
+    background: rgba(245, 245, 245, 1);
+    border-radius: 40px;
+
+    @mixin iconBtn {
+      flex: none;
+      display: flex;
+      padding: 0 1rem;
+      align-items: flex-end;
+
+      .ant-btn.ant-btn-icon-only .anticon {
+        font-size: 1.5rem;
+      }
+    }
+
+    .wxchtf-add-files-box,
+    .wxchtf-submit-btn-box {
+      align-items: center;
+
+      button {
+        width: unset;
+      }
+
+      svg {
+        font-size: 18px;
+        color: rgba(14, 15, 23, 0.25);
+      }
+    }
+
+    .wxchtf-add-files-box {
+      @include iconBtn();
+    }
+
+    .wxchtf-text-input-box {
+      flex: auto;
+      margin-left: 16px;
+      margin-right: 16px;
+
+      textarea {
+        resize: none;
+        border: none;
+        outline: none;
+        box-shadow: none;
+        background: transparent;
+        padding-inline: 0;
+        font-size: 13px;
+        line-height: 26px;
+
+        @include scrollbar();
+      }
+    }
+
+    .wxchtf-submit-btn-box {
+      @include iconBtn();
+      margin-left: 1rem;
+    }
+  }
+}

package/src/styles/members.scss

@@ -0,0 +1,13 @@
+.wxchtf-chatify {
+  .wxchtf-chat-members-panel {
+    min-width: 300px;
+    box-shadow: -4px 0px 20px -5px #0cd9e214, -2px 1px 12px #006e720f;
+
+    .wxchtf-chat-members-list {
+      .wxchtf-chat-members-list-item {
+        padding-inline: 1rem;
+        border-block-end: none;
+      }
+    }
+  }
+}

package/src/styles/variables.scss

@@ -1,10 +1,10 @@
 $borderColor: #ddd;
 $border: 1px solid #ddd;
 $background: white;
-$radius: 4px;
-$chatBodyBackground: #f5f5f5;
-$messageBackground: #e1f5fe;
-$myMessageBackground: #b9f6ca;
+$radius: 24px;
+$messageBackground: #f5f5f5;
+$myMessageBackground: #e4f7f7;
 $unreadCountBackground: #ffa726;
 $avatarSize: 40px;
 $messageBorderRadius: 10px;
+$messageBoxWidth: 1110px;

package/src/ui/Chat/ChatContext.tsx

@@ -0,0 +1,30 @@
+import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
+
+export interface ChatContext {
+  id: string;
+  showMembers: boolean;
+  onShowMembers: (value: boolean) => void;
+}
+
+const ChatReactContext = React.createContext<ChatContext>(null!);
+
+export function useChatContext() {
+  return useContext(ChatReactContext);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export function ChatContext(props: PropsWithChildren<{ id: string }>) {
+  const { id, children } = props;
+  const [showMembers, onShowMembers] = useState(false);
+
+  const value = useMemo<ChatContext>(
+    () => ({
+      id,
+      showMembers,
+      onShowMembers,
+    }),
+    [id, showMembers],
+  );
+
+  return <ChatReactContext.Provider value={value}>{children}</ChatReactContext.Provider>;
+}

package/src/ui/Chat/ChatEditableHeaderName.tsx

@@ -0,0 +1,63 @@
+import { Input, Tooltip } from 'antd';
+import { useUpdateChatNameMutation } from '../../core';
+import { customize } from '../customize';
+import { useEffect, useState } from 'react';
+import isHotkey from 'is-hotkey';
+import { useConversation } from '../Conversation';
+
+const isEscape = isHotkey('escape');
+const isEnter = isHotkey('enter');
+
+function useUpdateChatName(id: string, value: string) {
+  const [updateChatName] = useUpdateChatNameMutation();
+  return () => updateChatName({ id, name: value });
+}
+
+export const ChatEditableHeaderName = customize('ChatEditableHeaderName', () => {
+  const { id, name, active } = useConversation();
+  const [editNameValue, setEditNameValue] = useState('');
+  const [edit, setEdit] = useState(false);
+  const updateChatName = useUpdateChatName(id, editNameValue);
+
+  useEffect(() => {
+    if (edit) {
+      setEditNameValue(name ?? '');
+    }
+  }, [edit, name]);
+
+  if (!active) {
+    return <span className="wxchtf-conversation-name">{name}</span>;
+  }
+
+  if (edit) {
+    return (
+      <Tooltip defaultOpen title="Press Enter to save new chat name or Escape to cancel editing">
+        <Input
+          value={editNameValue}
+          onChange={(e) => setEditNameValue(e.target.value)}
+          onBlur={() => setEdit(false)}
+          onKeyDown={(e) => {
+            if (isEscape(e)) {
+              setEdit(false);
+            } else if (isEnter(e)) {
+              setEdit(false);
+
+              if (editNameValue !== name && editNameValue.trim() !== '') {
+                updateChatName();
+              }
+            }
+          }}
+          autoFocus
+        />
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip title="Click to edit name...">
+      <span className="wxchtf-conversation-name --editable" onClick={() => setEdit(true)}>
+        {name}
+      </span>
+    </Tooltip>
+  );
+});

package/src/ui/Chat/ChatHeaderActions.tsx

@@ -0,0 +1,19 @@
+import { ChatMembersPreview } from './Members';
+import { ChatMembersButton } from './Members';
+import { customize } from '../customize';
+import { useConversation } from '../Conversation';
+
+export const ChatHeaderActions = customize('ChatHeaderActions', () => {
+  const { active } = useConversation();
+
+  if (!active) {
+    return null;
+  }
+
+  return (
+    <div className="wxchtf-chat-members">
+      <ChatMembersPreview />
+      <ChatMembersButton />
+    </div>
+  );
+});

package/src/ui/Chat/ChatPanel.tsx

@@ -0,0 +1,30 @@
+import { CSSProperties } from 'react';
+import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
+import { CustomizeContext } from '../customize';
+import { ChatView, ChatViewCustomizeValue } from './ChatView';
+import { useGetChatQuery } from '../../core';
+
+export interface ChatPanelCustomizeValue extends ChatViewCustomizeValue {}
+
+export interface ChatPanelProps {
+  id: string;
+  className?: string;
+  style?: CSSProperties;
+  localizer?: Localizer;
+  customize?: ChatPanelCustomizeValue;
+}
+
+export function ChatPanel(props: ChatPanelProps) {
+  const { id, className = '', customize, localizer = defaultLocalizer, style } = props;
+  const { data: chat } = useGetChatQuery({ id });
+
+  return (
+    <div className={`wxchtf-chatify wxchtf-chat-panel ${className}`} style={style}>
+      <LocalizerContext.Provider value={localizer}>
+        <CustomizeContext.Provider value={customize as any}>
+          {chat && <ChatView value={chat} key={id} />}
+        </CustomizeContext.Provider>
+      </LocalizerContext.Provider>
+    </div>
+  );
+}