@webinex/chatify 1.0.3-rc3 → 2.0.0-alpha10

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

@@ -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/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

@@ -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/{ChatPanel/ChatHeaderName.tsx → Chat/ChatEditableHeaderName.tsx}

@@ -1,69 +1,63 @@
-import { Input, Tooltip } from 'antd';
-import { useSelect, useUpdateChatNameMutation } from '../../core';
-import { ChatName } from '../ChatName';
-import { customize } from '../customize';
-import { useEffect, useState } from 'react';
-import isHotkey from 'is-hotkey';
-
-export interface ChatHeaderNameProps {
-  id: string;
-}
-
-const isEscape = isHotkey('escape');
-const isEnter = isHotkey('enter');
-
-function useUpdateChatName(id: string, value: string) {
-  const [updateChatName] = useUpdateChatNameMutation();
-  return () => updateChatName({ id, name: value });
-}
-
-export const ChatHeaderName = customize('ChatHeaderName', (props: ChatHeaderNameProps) => {
-  const { id } = props;
-  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
-  const name = chat.name;
-  const [editNameValue, setEditNameValue] = useState('');
-  const [edit, setEdit] = useState(false);
-  const updateChatName = useUpdateChatName(id, editNameValue);
-
-  useEffect(() => {
-    if (edit) {
-      setEditNameValue(name);
-    }
-  }, [edit, name]);
-
-  if (!chat.active) {
-    return <span className="wxchtf-chat-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-chat-name --editable" onClick={() => setEdit(true)}>
-        <ChatName name={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

@@ -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 { 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>
+  );
+}

package/src/ui/Chat/ChatView.tsx

@@ -0,0 +1,115 @@
+import { CustomizeContext, customize, useCustomizeContext } from '../customize';
+import { MessageBody, chatId, chatifyApi } from '../../core';
+import {
+  Conversation,
+  ConversationCustomizeValue,
+  ConversationProps,
+  ConversationValue,
+} from '../Conversation';
+import { useCallback, useMemo } from 'react';
+import { ChatEditableHeaderName } from './ChatEditableHeaderName';
+import { ChatHeaderActions } from './ChatHeaderActions';
+import { ChatMembersCustomizeValue, ChatMembersPanel } from './Members';
+import { ChatContext, useChatContext } from './ChatContext';
+
+export interface ChatProps {
+  value: ChatValue;
+}
+
+export interface ChatValue extends ConversationValue {}
+
+export interface ChatViewCustomizeValue extends ConversationCustomizeValue, ChatMembersCustomizeValue {
+  ChatEditableHeaderName?: typeof ChatEditableHeaderName.Component | null;
+  ChatHeaderActions?: typeof ChatHeaderActions.Component | null;
+  ChatView?: typeof ChatView.Component | null;
+}
+
+export const DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE: ConversationCustomizeValue = {
+  ConversationName: () => <ChatEditableHeaderName />,
+  ConversationActions: () => <ChatHeaderActions />,
+};
+
+function useConversation(props: ChatProps) {
+  const { value: chat } = props;
+  const { id, name, active, lastReadMessageId } = chat;
+
+  const { data: messageList } = chatifyApi.useGetChatMessageListQuery({ chatId: id });
+  const { messages, hasMore } = messageList ?? {};
+
+  const [fetchNext, { isLoading: isFetchNextLoading }] = chatifyApi.useFetchNextChatMessageListMutation();
+  const onNext = useCallback(() => fetchNext({ chatId: id }), [fetchNext, id]);
+
+  const [read] = chatifyApi.useReadChatMessageMutation();
+  const onRead = useCallback((id: string) => read({ id }), [read]);
+
+  const [send] = chatifyApi.useSendChatMessageMutation();
+  const onSend = useCallback((message: MessageBody) => send({ ...message, chatId: id }).unwrap(), [id, send]);
+
+  const { data: readQueue } = chatifyApi.useGetChatMessageReadQueueQuery();
+
+  const conversation = useMemo(() => {
+    if (!id) {
+      return null;
+    }
+
+    const result: ConversationProps = {
+      value: { id: id!, name: name!, active: active!, lastReadMessageId: lastReadMessageId! },
+      messages,
+      hasMore,
+      onNext,
+      nextLoading: isFetchNextLoading,
+      onRead,
+      onSend,
+      isReading: (id: string) => readQueue!.some((x) => chatId(x.value) === chatId(id) && id <= x.value),
+    };
+
+    return result;
+  }, [
+    onNext,
+    onRead,
+    onSend,
+    isFetchNextLoading,
+    id,
+    name,
+    active,
+    messages,
+    hasMore,
+    lastReadMessageId,
+    readQueue,
+  ]);
+
+  return conversation;
+}
+
+function Content(props: ChatProps) {
+  const conversation = useConversation(props);
+  const { showMembers } = useChatContext();
+
+  if (!conversation) {
+    return null;
+  }
+
+  return (
+    <div className="wxchtf-chat">
+      <Conversation {...conversation} />
+      {showMembers && <ChatMembersPanel />}
+    </div>
+  );
+}
+
+export const ChatView = customize('ChatView', (props: ChatProps) => {
+  const { value } = props;
+  const customized = useCustomizeContext();
+  const customize: ChatViewCustomizeValue = useMemo(
+    () => ({ ...(customized ?? {}), ...DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE }),
+    [customized],
+  );
+
+  return (
+    <CustomizeContext.Provider value={customize}>
+      <ChatContext id={value.id}>
+        <Content value={value} />
+      </ChatContext>
+    </CustomizeContext.Provider>
+  );
+});

package/src/ui/Chat/Members/ChatMembersButton.tsx

@@ -0,0 +1,9 @@
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { Icon } from '../../common/Icon';
+import { useChatContext } from '../ChatContext';
+
+export const ChatMembersButton = customize('ChatMembersButton', () => {
+  const { showMembers, onShowMembers } = useChatContext();
+  return <Button onClick={() => onShowMembers(!showMembers)} type="link" icon={<Icon type="members" />} />;
+});