@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha4

package/src/ui/ChatGroup/List/ChatListItemAvatar.tsx

@@ -1,22 +1,22 @@
-import { color } from '../../color';
-import { Icon } from '../../common/Icon';
-import { customize } from '../../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemAvatar = customize('ChatListItemAvatar', (props: ChatListItemBoxProps) => {
-  const { id } = props.chat;
-
-  return (
-    <div
-      className="wxchtf-chat-avatar"
-      style={
-        {
-          '--background-color': color(id, { lightness: 90 }),
-          '--color': color(id, { saturation: 60, lightness: 65 }),
-        } as any
-      }
-    >
-      <Icon type="chat" />
-    </div>
-  );
-});
+import { color } from '../../color';
+import { Icon } from '../../common/Icon';
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemAvatar = customize('ChatListItemAvatar', (props: ChatListItemBoxProps) => {
+  const { id } = props.chat;
+
+  return (
+    <div
+      className="wxchtf-chat-avatar"
+      style={
+        {
+          '--background-color': color(id, { lightness: 90 }),
+          '--color': color(id, { saturation: 60, lightness: 65 }),
+        } as any
+      }
+    >
+      <Icon type="chat" />
+    </div>
+  );
+});

package/src/ui/ChatGroup/List/ChatListItemBox.tsx

@@ -1,26 +1,26 @@
-import { ChatListItem as ChatListItemModel } from '../../../core';
-import { customize } from '../../customize';
-import { ChatListItemName } from './ChatListItemName';
-import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
-import { ChatListItemLastMessage } from './ChatListItemLastMessage';
-import { ChatListItemAvatar } from './ChatListItemAvatar';
-
-export interface ChatListItemBoxProps {
-  chat: ChatListItemModel;
-}
-
-export const ChatListItemBox = customize('ChatListItemBox', (props: ChatListItemBoxProps) => {
-  const { message, lastReadMessageId } = props.chat;
-  const read = lastReadMessageId != null && lastReadMessageId.localeCompare(message.id) >= 0;
-
-  return (
-    <div className={'wxchtf-chat' + (!read ? ' --unread' : '')}>
-      <ChatListItemAvatar {...props} />
-      <span className="wxchtf-chat-info">
-        <ChatListItemName {...props} />
-        <ChatListItemUnreadCount {...props} />
-        <ChatListItemLastMessage {...props} />
-      </span>
-    </div>
-  );
-});
+import { ChatListItem as ChatListItemModel } from '../../../core';
+import { customize } from '../../customize';
+import { ChatListItemName } from './ChatListItemName';
+import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
+import { ChatListItemLastMessage } from './ChatListItemLastMessage';
+import { ChatListItemAvatar } from './ChatListItemAvatar';
+
+export interface ChatListItemBoxProps {
+  chat: ChatListItemModel;
+}
+
+export const ChatListItemBox = customize('ChatListItemBox', (props: ChatListItemBoxProps) => {
+  const { message, lastReadMessageId } = props.chat;
+  const read = lastReadMessageId != null && lastReadMessageId.localeCompare(message.id) >= 0;
+
+  return (
+    <div className={'wxchtf-chat' + (!read ? ' --unread' : '')}>
+      <ChatListItemAvatar {...props} />
+      <span className="wxchtf-chat-info">
+        <ChatListItemName {...props} />
+        <ChatListItemUnreadCount {...props} />
+        <ChatListItemLastMessage {...props} />
+      </span>
+    </div>
+  );
+});

package/src/ui/ChatGroup/List/ChatListItemLastMessage.tsx

@@ -1,15 +1,15 @@
-import { customize } from '../../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
-import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
-import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
-
-export const ChatListItemLastMessage = customize('ChatListItemLastMessage', (props: ChatListItemBoxProps) => {
-  return (
-    <div className="wxchtf-chat-last">
-      <ChatListItemLastMessageAuthor {...props} />
-      <ChatListItemLastMessageContent {...props} />
-      <ChatListItemLastMessageSentAt {...props} />
-    </div>
-  );
-});
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
+import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
+import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
+
+export const ChatListItemLastMessage = customize('ChatListItemLastMessage', (props: ChatListItemBoxProps) => {
+  return (
+    <div className="wxchtf-chat-last">
+      <ChatListItemLastMessageAuthor {...props} />
+      <ChatListItemLastMessageContent {...props} />
+      <ChatListItemLastMessageSentAt {...props} />
+    </div>
+  );
+});

package/src/ui/ChatGroup/List/ChatListItemLastMessageAuthor.tsx

@@ -1,15 +1,15 @@
-import { customize } from '../../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemLastMessageAuthor = customize(
-  'ChatListItemLastMessageAuthor',
-  (props: ChatListItemBoxProps) => {
-    const { message } = props.chat;
-
-    if (message.sentBy.id === 'chatify::system') {
-      return null;
-    }
-
-    return <div className="wxchtf-chat-last-author">{message.sentBy.name}</div>;
-  },
-);
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemLastMessageAuthor = customize(
+  'ChatListItemLastMessageAuthor',
+  (props: ChatListItemBoxProps) => {
+    const { message } = props.chat;
+
+    if (message.sentBy.id === 'chatify::system') {
+      return null;
+    }
+
+    return <div className="wxchtf-chat-last-author">{message.sentBy.name}</div>;
+  },
+);

package/src/ui/ChatGroup/List/ChatListItemLastMessageContent.tsx

@@ -1,21 +1,21 @@
-import { useLocalizer } from '../../localizer';
-import { formatSystemMessage } from '../../Conversation/SystemMessage';
-import { FC } from 'react';
-import { customize } from '../../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemLastMessageContent = customize<FC<ChatListItemBoxProps>>(
-  'ChatListItemLastMessageContent',
-  (props) => {
-    const { message } = props.chat;
-    const localizer = useLocalizer();
-
-    return (
-      <div className="wxchtf-chat-last-message">
-        {message.sentBy.id === 'chatify::system'
-          ? formatSystemMessage(localizer, message.text)
-          : message.text}
-      </div>
-    );
-  },
-);
+import { useLocalizer } from '../../localizer';
+import { formatSystemMessage } from '../../Conversation/SystemMessage';
+import { FC } from 'react';
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemLastMessageContent = customize<FC<ChatListItemBoxProps>>(
+  'ChatListItemLastMessageContent',
+  (props) => {
+    const { message } = props.chat;
+    const localizer = useLocalizer();
+
+    return (
+      <div className="wxchtf-chat-last-message">
+        {message.sentBy.id === 'chatify::system'
+          ? message.text && formatSystemMessage(localizer, message.text)
+          : message.text}
+      </div>
+    );
+  },
+);

package/src/ui/ChatGroup/List/ChatListItemLastMessageSentAt.tsx

@@ -1,22 +1,22 @@
-import { customize } from '../../customize';
-import { useLocalizer } from '../../localizer';
-import { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemLastMessageSentAt = customize(
-  'ChatListItemLastMessageSentAt',
-  (props: ChatListItemBoxProps) => {
-    const {
-      chat: {
-        message: { sentAt },
-      },
-    } = props;
-
-    const localizer = useLocalizer();
-
-    return (
-      <div className="wxchtf-chat-last-sent-at">
-        {localizer.isToday(sentAt) ? localizer.timestamp(sentAt) : localizer.dateTime(sentAt)}
-      </div>
-    );
-  },
-);
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+import { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemLastMessageSentAt = customize(
+  'ChatListItemLastMessageSentAt',
+  (props: ChatListItemBoxProps) => {
+    const {
+      chat: {
+        message: { sentAt },
+      },
+    } = props;
+
+    const localizer = useLocalizer();
+
+    return (
+      <div className="wxchtf-chat-last-sent-at">
+        {localizer.isToday(sentAt) ? localizer.timestamp(sentAt) : localizer.dateTime(sentAt)}
+      </div>
+    );
+  },
+);

package/src/ui/ChatGroup/List/ChatListItemName.tsx

@@ -1,8 +1,8 @@
-import { customize } from '../../customize';
-import type { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemName = customize('ChatListItemName', (props: ChatListItemBoxProps) => {
-  const { chat } = props;
-
-  return <div className="wxchtf-chat-name">{chat.name}</div>;
-});
+import { customize } from '../../customize';
+import type { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemName = customize('ChatListItemName', (props: ChatListItemBoxProps) => {
+  const { chat } = props;
+
+  return <div className="wxchtf-chat-name">{chat.name}</div>;
+});

package/src/ui/ChatGroup/List/ChatListItemUnreadCount.tsx

@@ -1,12 +1,12 @@
-import { customize } from '../../customize';
-import { ChatListItemBoxProps } from './ChatListItemBox';
-
-export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', (props: ChatListItemBoxProps) => {
-  const { totalUnreadCount: unreadCount } = props.chat;
-
-  if (unreadCount <= 0) {
-    return null;
-  }
-
-  return <div className="wxchtf-unread-count">{unreadCount}</div>;
-});
+import { customize } from '../../customize';
+import { ChatListItemBoxProps } from './ChatListItemBox';
+
+export const ChatListItemUnreadCount = customize('ChatListItemUnreadCount', (props: ChatListItemBoxProps) => {
+  const { totalUnreadCount: unreadCount } = props.chat;
+
+  if (unreadCount <= 0) {
+    return null;
+  }
+
+  return <div className="wxchtf-unread-count">{unreadCount}</div>;
+});

package/src/ui/ChatGroup/List/index.ts

@@ -1,31 +1,31 @@
-import { ChatList } from './ChatList';
-import { ChatListItemAvatar } from './ChatListItemAvatar';
-import { ChatListItemBox } from './ChatListItemBox';
-import { ChatListItemLastMessage } from './ChatListItemLastMessage';
-import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
-import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
-import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
-import { ChatListItemName } from './ChatListItemName';
-import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
-
-export * from './ChatList';
-export * from './ChatListItemAvatar';
-export * from './ChatListItemBox';
-export * from './ChatListItemLastMessage';
-export * from './ChatListItemLastMessageAuthor';
-export * from './ChatListItemLastMessageContent';
-export * from './ChatListItemLastMessageSentAt';
-export * from './ChatListItemName';
-export * from './ChatListItemUnreadCount';
-
-export interface ChatListCustomizeValue {
-  ChatList?: typeof ChatList.Component | null;
-  ChatListItemAvatar?: typeof ChatListItemAvatar.Component | null;
-  ChatListItemBox?: typeof ChatListItemBox.Component | null;
-  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
-  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
-  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
-  ChatListItemLastMessageSentAt?: typeof ChatListItemLastMessageSentAt.Component | null;
-  ChatListItemName?: typeof ChatListItemName.Component | null;
-  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
-}
+import { ChatList } from './ChatList';
+import { ChatListItemAvatar } from './ChatListItemAvatar';
+import { ChatListItemBox } from './ChatListItemBox';
+import { ChatListItemLastMessage } from './ChatListItemLastMessage';
+import { ChatListItemLastMessageAuthor } from './ChatListItemLastMessageAuthor';
+import { ChatListItemLastMessageContent } from './ChatListItemLastMessageContent';
+import { ChatListItemLastMessageSentAt } from './ChatListItemLastMessageSentAt';
+import { ChatListItemName } from './ChatListItemName';
+import { ChatListItemUnreadCount } from './ChatListItemUnreadCount';
+
+export * from './ChatList';
+export * from './ChatListItemAvatar';
+export * from './ChatListItemBox';
+export * from './ChatListItemLastMessage';
+export * from './ChatListItemLastMessageAuthor';
+export * from './ChatListItemLastMessageContent';
+export * from './ChatListItemLastMessageSentAt';
+export * from './ChatListItemName';
+export * from './ChatListItemUnreadCount';
+
+export interface ChatListCustomizeValue {
+  ChatList?: typeof ChatList.Component | null;
+  ChatListItemAvatar?: typeof ChatListItemAvatar.Component | null;
+  ChatListItemBox?: typeof ChatListItemBox.Component | null;
+  ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
+  ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
+  ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
+  ChatListItemLastMessageSentAt?: typeof ChatListItemLastMessageSentAt.Component | null;
+  ChatListItemName?: typeof ChatListItemName.Component | null;
+  ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
+}

package/src/ui/ChatGroup/index.ts

@@ -1,5 +1,5 @@
-export * from './Create';
-export * from './Layout';
-export * from './List';
-export * from './ChatGroupContext';
-export * from './ChatGroupPanel';
+export * from './Create';
+export * from './Layout';
+export * from './List';
+export * from './ChatGroupContext';
+export * from './ChatGroupPanel';

package/src/ui/Chatify.tsx

@@ -1,9 +1,9 @@
-import { ChatPanel } from './Chat';
-import { ChatGroupPanel } from './ChatGroup';
-import { ThreadPanel } from './Thread';
-
-export const Chatify = {
-  Thread: ThreadPanel,
-  ChatGroup: ChatGroupPanel,
-  Chat: ChatPanel,
-};
+import { ChatPanel } from './Chat';
+import { ChatGroupPanel } from './ChatGroup';
+import { ThreadPanel } from './Thread';
+
+export const Chatify = {
+  Thread: ThreadPanel,
+  ChatGroup: ChatGroupPanel,
+  Chat: ChatPanel,
+};

package/src/ui/Conversation/Conversation.tsx

@@ -1,76 +1,78 @@
-import { ConversationHeader } from './ConversationHeader';
-import { ConversationBody } from './ConversationBody';
-import { customize } from '../customize';
-import { ConversationName } from './ConversationName';
-import { ConversationContext, ConversationContextValue, ConversationValue } from './ConversationContext';
-import { useMemo } from 'react';
-import { InputBox, InputBoxCustomizeValue } from './InputBox';
-import { ConversationActions } from './ConversationActions';
-import { MessageCustomizeValue } from './Message';
-import { SendingMessageCustomizeValue } from './SendingMessage';
-import { SystemMessageCustomizeValue } from './SystemMessage';
-import { CommonCustomizeValue } from '../common';
-
-export interface ConversationProps extends Omit<ConversationContextValue, keyof ConversationValue> {
-  value: ConversationValue;
-}
-
-export interface ConversationCustomizeValue
-  extends InputBoxCustomizeValue,
-    MessageCustomizeValue,
-    SendingMessageCustomizeValue,
-    SystemMessageCustomizeValue,
-    CommonCustomizeValue {
-  ConversationActions?: typeof ConversationActions.Component | null;
-  ConversationBody?: typeof ConversationBody.Component | null;
-  ConversationHeader?: typeof ConversationHeader.Component | null;
-  ConversationName?: typeof ConversationName.Component | null;
-}
-
-export const Conversation = customize('Conversation', (props: ConversationProps) => {
-  const { value, hasMore, messages, nextLoading, onNext, onRead, onSend, isReading, noReadTracking } = props;
-  const { id, active, name, lastReadMessageId } = value;
-
-  const context = useMemo<ConversationContextValue>(
-    () => ({
-      id,
-      name,
-      active,
-      lastReadMessageId,
-      hasMore,
-      messages,
-      nextLoading,
-      onNext,
-      onRead,
-      onSend,
-      isReading,
-      noReadTracking,
-    }),
-    [
-      id,
-      name,
-      active,
-      onNext,
-      onRead,
-      onSend,
-      hasMore,
-      messages,
-      nextLoading,
-      lastReadMessageId,
-      isReading,
-      noReadTracking,
-    ],
-  );
-
-  return (
-    <ConversationContext.Provider value={context}>
-      <div className="wxchtf-conversation">
-        <div className="wxchtf-conversation-main">
-          <ConversationHeader />
-          <ConversationBody />
-          {active && <InputBox />}
-        </div>
-      </div>
-    </ConversationContext.Provider>
-  );
-});
+import { ConversationHeader } from './ConversationHeader';
+import { ConversationBody } from './ConversationBody';
+import { customize } from '../customize';
+import { ConversationName } from './ConversationName';
+import { ConversationContext, ConversationContextValue, ConversationValue } from './ConversationContext';
+import { useMemo } from 'react';
+import { InputBox, InputBoxCustomizeValue } from './InputBox';
+import { ConversationActions } from './ConversationActions';
+import { MessageCustomizeValue } from './Message';
+import { SendingMessageCustomizeValue } from './SendingMessage';
+import { SystemMessageCustomizeValue } from './SystemMessage';
+import { CommonCustomizeValue } from '../common';
+import type { Flippo } from '@webinex/flippo';
+
+export interface ConversationProps extends Omit<ConversationContextValue, keyof ConversationValue> {
+  value: ConversationValue;
+}
+
+export interface ConversationCustomizeValue
+  extends InputBoxCustomizeValue,
+    MessageCustomizeValue,
+    SendingMessageCustomizeValue,
+    SystemMessageCustomizeValue,
+    CommonCustomizeValue {
+  ConversationActions?: typeof ConversationActions.Component | null;
+  ConversationBody?: typeof ConversationBody.Component | null;
+  ConversationHeader?: typeof ConversationHeader.Component | null;
+  ConversationName?: typeof ConversationName.Component | null;
+  flippo?: Flippo;
+}
+
+export const Conversation = customize('Conversation', (props: ConversationProps) => {
+  const { value, hasMore, messages, nextLoading, onNext, onRead, onSend, isReading, noReadTracking } = props;
+  const { id, active, name, lastReadMessageId } = value;
+
+  const context = useMemo<ConversationContextValue>(
+    () => ({
+      id,
+      name,
+      active,
+      lastReadMessageId,
+      hasMore,
+      messages,
+      nextLoading,
+      onNext,
+      onRead,
+      onSend,
+      isReading,
+      noReadTracking,
+    }),
+    [
+      id,
+      name,
+      active,
+      onNext,
+      onRead,
+      onSend,
+      hasMore,
+      messages,
+      nextLoading,
+      lastReadMessageId,
+      isReading,
+      noReadTracking,
+    ],
+  );
+
+  return (
+    <ConversationContext.Provider value={context}>
+      <div className="wxchtf-conversation">
+        <div className="wxchtf-conversation-main">
+          <ConversationHeader />
+          <ConversationBody />
+          {active && <InputBox />}
+        </div>
+      </div>
+    </ConversationContext.Provider>
+  );
+});

package/src/ui/Conversation/ConversationActions.tsx

@@ -1,5 +1,5 @@
-import { customize } from '../customize';
-
-export const ConversationActions = customize('ConversationActions', () => {
-  return null;
-});
+import { customize } from '../customize';
+
+export const ConversationActions = customize('ConversationActions', () => {
+  return null;
+});

package/src/ui/Conversation/ConversationBody.tsx

@@ -1,28 +1,28 @@
-import { MessageBox } from './Message';
-import { NextMessagesObserver } from './NextObserver';
-import { SystemMessageBox } from './SystemMessage';
-import { MessageSkeleton } from '../common/MessageSkeleton';
-import { customize } from '../customize';
-import { SYSTEM_ID } from '../../core';
-import { useConversation } from './ConversationContext';
-
-// TODO: Add sending message box
-export const ConversationBody = customize('ConversationBody', () => {
-  const { id, messages = [], hasMore, onNext, nextLoading } = useConversation();
-
-  return (
-    <div className="wxchtf-conversation-body">
-      {!messages && <MessageSkeleton count={5} />}
-
-      {messages?.map((x) => {
-        if (x.sentBy.id === SYSTEM_ID) {
-          return <SystemMessageBox key={x.id} message={x} />;
-        }
-
-        return <MessageBox message={x} key={x.id} />;
-      })}
-
-      {hasMore && <NextMessagesObserver key={messages.length + id} onLoad={onNext} loading={nextLoading} />}
-    </div>
-  );
-});
+import { MessageBox } from './Message';
+import { NextMessagesObserver } from './NextObserver';
+import { SystemMessageBox } from './SystemMessage';
+import { MessageSkeleton } from '../common/MessageSkeleton';
+import { customize } from '../customize';
+import { SYSTEM_ID } from '../../core';
+import { useConversation } from './ConversationContext';
+
+// TODO: Add sending message box
+export const ConversationBody = customize('ConversationBody', () => {
+  const { id, messages = [], hasMore, onNext, nextLoading } = useConversation();
+
+  return (
+    <div className="wxchtf-conversation-body">
+      {!messages && <MessageSkeleton count={5} />}
+
+      {messages?.map((x) => {
+        if (x.sentBy.id === SYSTEM_ID) {
+          return <SystemMessageBox key={x.id} message={x} />;
+        }
+
+        return <MessageBox message={x} key={x.id} />;
+      })}
+
+      {hasMore && <NextMessagesObserver key={messages.length + id} onLoad={onNext} loading={nextLoading} />}
+    </div>
+  );
+});