@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha12

package/src/styles/input.scss

@@ -1,74 +1,148 @@
-@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;
-    }
-  }
-}
+@use './variables.scss' as vars;
+@use './mixins.scss' as mixins;
+
+@keyframes wxchtf-add-files-animate {
+  15% {
+    transform: scale(70%);
+  }
+
+  50% {
+    transform: scale(120%);
+  }
+}
+
+@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-input-form {
+  flex: none;
+  max-height: 300px;
+  display: flex;
+  flex-flow: column nowrap;
+  margin: 12px 20px 20px 20px;
+
+  .wxchtf-input-box {
+    flex: none;
+    padding: 8px;
+    max-width: vars.$messageBoxWidth;
+    width: 100%;
+    margin: auto;
+    background: rgb(245, 245, 245);
+    border-radius: 25px;
+
+    .wxchtf-input-box-row {
+      display: flex;
+      flex-flow: row nowrap;
+    }
+
+    .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-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 mixins.scrollbar();
+      }
+    }
+
+    .wxchtf-submit-btn-box {
+      @include iconBtn();
+      margin-left: 1rem;
+    }
+  }
+}
+
+.wxchtf-add-files-box {
+  @include iconBtn();
+  flex: none;
+
+  .wxchtf-add-files-added-btn {
+    margin-left: 0.5rem;
+    width: 1rem;
+
+    .ant-btn-icon {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: vars.$strokeColor;
+    }
+
+    &.active {
+      animation: wxchtf-add-files-animate 2s ease-out infinite;
+    }
+  }
+}
+
+.wxchtf-file-list-box {
+  margin-bottom: 1rem;
+
+  .wxchtf-file-list {
+    @include mixins.scrollbar($hide: true);
+
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1rem;
+    padding: 0.5rem;
+    max-height: 100px;
+    overflow-y: auto;
+    overflow-x: visible;
+  }
+
+  .wxchtf-file {
+    display: inline-flex;
+    flex-flow: row nowrap;
+    background-color: white;
+    padding: 1rem;
+    border-radius: 20px;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    align-items: center;
+
+    .wxchtf-file-info {
+      margin-right: 2rem;
+      min-width: 0;
+      max-width: 200px;
+    }
+
+    .wxchtf-file-name {
+      font-size: 0.9rem;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .wxchtf-file-size {
+      color: vars.$strokeColor;
+      font-size: 0.8rem;
+    }
+  }
+}

package/src/styles/keyframes.scss

@@ -1,14 +1,14 @@
-@keyframes fadeInFromNone {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-
-  1% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
+@keyframes fadeInFromNone {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+
+  1% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

package/src/styles/members.scss

@@ -1,13 +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;
-      }
-    }
-  }
-}
+.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/mixins.scss

@@ -1,20 +1,25 @@
-@mixin scrollbar() {
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: #f1f1f1;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #dfdfdf;
-  }
-}
-
-@mixin avatarSize($size) {
-  width: $size;
-  height: $size;
-  line-height: $size - 2px;
-}
+@mixin scrollbar($hide: false) {
+  @if ($hide) {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  } @else {
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: #f1f1f1;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #dfdfdf;
+    }
+  }
+}
+
+@mixin avatarSize($size) {
+  width: $size;
+  height: $size;
+  line-height: $size - 2px;
+}

package/src/styles/variables.scss

@@ -1,10 +1,13 @@
-$borderColor: #ddd;
-$border: 1px solid #ddd;
-$background: white;
-$radius: 24px;
-$messageBackground: #f5f5f5;
-$myMessageBackground: #e4f7f7;
-$unreadCountBackground: #ffa726;
-$avatarSize: 40px;
-$messageBorderRadius: 10px;
-$messageBoxWidth: 1110px;
+$borderColor: #ddd;
+$border: 1px solid #ddd;
+$background: white;
+$strokeColor: #0e0f1740;
+$radius: 24px;
+$messageBackground: #f5f5f5;
+$myMessageBackground: #e4f7f7;
+$unreadCountBackground: #ffa726;
+$primaryColor: #0cd9e2;
+$avatarSize: 40px;
+$messageBorderRadius: 10px;
+$messageBoxWidth: 1110px;
+$linkColor: #1677ff;

package/src/ui/Chat/ChatContext.tsx

@@ -1,30 +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>;
-}
+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

@@ -1,63 +1,63 @@
-import { Input, Tooltip } from 'antd';
-import { chatifyApi } 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] = chatifyApi.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>
-  );
-});
+import { Input, Tooltip } from 'antd';
+import { chatifyApi } 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] = chatifyApi.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

@@ -1,19 +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>
-  );
-});
+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

@@ -1,30 +1,30 @@
-import { CSSProperties } from 'react';
-import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
-import { CustomizeContext } from '../customize';
-import { ChatView, ChatViewCustomizeValue } from './ChatView';
-import { chatifyApi } 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 } = chatifyApi.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>
-  );
-}
+import { CSSProperties } from 'react';
+import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
+import { CustomizeContext } from '../customize';
+import { ChatView, ChatViewCustomizeValue } from './ChatView';
+import { chatifyApi } 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 } = chatifyApi.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>
+  );
+}