@webinex/chatify 1.0.0-rc2 → 1.0.0-rc3

package/src/ui/InputBox/InputTextBox.tsx

@@ -0,0 +1,50 @@
+import { Input } from 'antd';
+import { customize } from '../customize';
+import isHotkey from 'is-hotkey';
+import { memo, useCallback } from 'react';
+import { useLocalizer } from '../localizer';
+
+export interface TextInputBoxProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: (value: string) => void;
+}
+
+const isSend = isHotkey('ctrl+enter');
+
+const AUTO_SIZE = { maxRows: 5 };
+
+export const InputTextBox = customize(
+  'InputTextBox',
+  memo((props: TextInputBoxProps) => {
+    const { value, onChange, onSend } = props;
+    const localizer = useLocalizer();
+
+    const onInputChange = useCallback(
+      (e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value),
+      [onChange],
+    );
+
+    const onKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (isSend(e)) {
+          onSend(value);
+        }
+      },
+      [onSend, value],
+    );
+
+    return (
+      <div className="wxchtf-text-input-box">
+        <Input.TextArea
+          value={value}
+          onChange={onInputChange}
+          autoSize={AUTO_SIZE}
+          className="wxchtf-text-input-textarea"
+          placeholder={localizer.input.placeholder()}
+          onKeyDown={onKeyDown}
+        />
+      </div>
+    );
+  }),
+);

package/src/ui/InputBox/index.ts

@@ -0,0 +1,4 @@
+export * from './InputBox';
+export * from './InputFilesBox';
+export * from './InputSubmitButtonBox';
+export * from './InputTextBox';

package/src/ui/Layout/Aside.tsx

@@ -0,0 +1,10 @@
+import { customize } from '../customize';
+import { ChatList } from '../ChatList';
+
+export const Aside = customize('Aside', () => {
+  return (
+    <div className="wxchtf-aside">
+      <ChatList />
+    </div>
+  );
+});

package/src/ui/Layout/Body.tsx

@@ -0,0 +1,10 @@
+import { customize } from '../customize';
+import { Aside } from './Aside';
+import { Main } from './Main';
+
+export const Body = customize('Body', () => (
+  <div className="wxchtf-body">
+    <Aside />
+    <Main />
+  </div>
+));

package/src/ui/Layout/Footer.tsx

@@ -0,0 +1,3 @@
+import { customize } from '../customize';
+
+export const Footer = customize('Footer', () => <div className="wxchtf-footer"></div>);

package/src/ui/Layout/Header.tsx

@@ -0,0 +1,10 @@
+import { AddChatButton } from '../AddChatButton';
+import { customize } from '../customize';
+
+export const Header = customize('Header', () => {
+  return (
+    <div className="wxchtf-header">
+      <AddChatButton />
+    </div>
+  );
+});

package/src/ui/Layout/Main.tsx

@@ -0,0 +1,15 @@
+import { useSelect } from '../../core';
+import { customize } from '../customize';
+import { CreateChatPanel } from '../CreateChatPanel';
+import { ChatPanel } from '../ChatPanel';
+
+export const Main = customize('Main', () => {
+  const { view, chatId } = useSelect((x) => ({ view: x.ui.view, chatId: x.ui.chatId }), []);
+
+  return (
+    <div className="wxchtf-main">
+      {view === 'chat' && chatId && <ChatPanel id={chatId} key={chatId} />}
+      {view === 'new-chat' && <CreateChatPanel />}
+    </div>
+  );
+});

package/src/ui/Layout/index.ts

@@ -0,0 +1,5 @@
+export * from './Aside';
+export * from './Header';
+export * from './Footer';
+export * from './Main';
+export * from './Body';

package/src/ui/Message/MessageAuthor.tsx

@@ -0,0 +1,13 @@
+import { customize } from '../customize';
+import { Avatar } from '../Avatar';
+import type { MessageBoxProps } from './MessageBox';
+
+export const MessageAuthor = customize('MessageAuthor', (props: MessageBoxProps) => {
+  const { sentBy } = props.message;
+
+  return (
+    <div className="wxchtf-message-author">
+      <Avatar account={sentBy} />
+    </div>
+  );
+});

package/src/ui/Message/MessageBox.tsx

@@ -0,0 +1,20 @@
+import { useRef } from 'react';
+import { Message } from '../../core';
+import { customize } from '../customize';
+import { MessageReadObserver } from '../MessageReadObserver';
+import { MessageRow } from './MessageRow';
+
+export interface MessageBoxProps {
+  message: Message;
+}
+
+export const MessageBox = customize('MessageBox', (props: MessageBoxProps) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <MessageReadObserver messageRef={ref} {...props} />
+      <MessageRow containerRef={ref} {...props} />
+    </>
+  );
+});

package/src/ui/Message/MessageContent.tsx

@@ -0,0 +1,13 @@
+import { customize } from '../customize';
+import { MessageText } from './MessageText';
+import { MessageInfoBox } from './MessageInfoBox';
+import type { MessageBoxProps } from './MessageBox';
+
+export const MessageContent = customize('MessageContent', (props: MessageBoxProps) => {
+  return (
+    <div className="wxchtf-message-content">
+      <MessageText {...props} />
+      <MessageInfoBox {...props} />
+    </div>
+  );
+});

package/src/ui/Message/MessageInfoBox.tsx

@@ -0,0 +1,25 @@
+import { useMe } from '../../ChatifyContext';
+import { useSelect } from '../../core';
+import { customize } from '../customize';
+import { useLocalizer } from '../localizer';
+import type { MessageBoxProps } from './MessageBox';
+
+export const MessageInfoBox = customize('MessageInfoBox', (props: MessageBoxProps) => {
+  const { message } = props;
+  const { id, sentBy, sentAt } = message;
+  const me = useMe();
+  const my = sentBy.id === me;
+  const localizer = useLocalizer();
+  const reading = useSelect((x) => x.queue.read.queued.includes(id), []);
+
+  return (
+    <div className="wxchtf-message-info-box">
+      <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
+      {!my && (
+        <div className="wxchtf-message-read-box">
+          {reading ? localizer.message.reading() : localizer.message.read()}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/ui/Message/MessageRow.tsx

@@ -0,0 +1,24 @@
+import { useMe } from '../../ChatifyContext';
+import { Ref } from 'react';
+import { customize } from '../customize';
+import { MessageAuthor } from './MessageAuthor';
+import { MessageContent } from './MessageContent';
+import { MessageBoxProps } from './MessageBox';
+
+export interface MessageRowProps extends MessageBoxProps {
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export const MessageRow = customize('MessageRow', (props: MessageRowProps) => {
+  const { message, containerRef } = props;
+  const { sentBy } = message;
+  const me = useMe();
+  const my = sentBy.id === me;
+
+  return (
+    <div ref={containerRef} className={'wxchtf-message' + (my ? ' --my' : '')}>
+      <MessageAuthor {...props} />
+      <MessageContent {...props} />
+    </div>
+  );
+});

package/src/ui/Message/MessageText.tsx

@@ -0,0 +1,7 @@
+import { customize } from '../customize';
+import { MessageBoxProps } from './MessageBox';
+
+export const MessageText = customize('MessageText', (props: MessageBoxProps) => {
+  const { text } = props.message;
+  return <div className="wxchtf-message-text">{text}</div>;
+});

package/src/ui/Message/index.ts

@@ -0,0 +1,6 @@
+export * from './MessageAuthor';
+export * from './MessageBox';
+export * from './MessageContent';
+export * from './MessageInfoBox';
+export * from './MessageRow';
+export * from './MessageText';

package/src/ui/MessageReadObserver.tsx

@@ -0,0 +1,45 @@
+import { FC, RefObject, useEffect, useMemo, useRef } from 'react';
+import { useDispatch, useSelect } from '../core';
+import { customize } from './customize';
+import { MessageBoxProps } from './Message/MessageBox';
+
+export interface MessageReadObserverProps extends MessageBoxProps {
+  messageRef: RefObject<HTMLDivElement | null>;
+}
+
+export const MessageReadObserver = customize<FC<MessageReadObserverProps>>('MessageReadObserver', (props) => {
+  const { message, messageRef } = props;
+  const dispatch = useDispatch();
+  const isRead = useSelect((x) => {
+    const lastReadMessageId = x.query.chatList.data!.find((x) => x.id === message.chatId)!.lastReadMessageId;
+    return lastReadMessageId != null && message.id.localeCompare(lastReadMessageId) <= 0;
+  }, []);
+
+  const readRef = useRef(isRead);
+
+  useEffect(() => {
+    readRef.current = readRef.current || isRead;
+  }, [isRead]);
+
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting && !readRef.current) {
+          readRef.current = true;
+          dispatch({ type: 'read', data: { id: message.id, timestamp: new Date().getTime() } });
+        }
+      }),
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  useEffect(() => {
+    observer.observe(messageRef.current!);
+    return () => observer.disconnect();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [observer]);
+
+  return <></>;
+});

package/src/ui/{LoadMore.tsx → Next.tsx}

@@ -1,19 +1,27 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useLoadMore } from '../core';
+import { useFetchNextMutation } from '../core';
 import { MessageSkeleton } from './MessageSkeleton';
 
-export interface LoadMoreProps {
+export interface NextProps {
   chatId: string;
 }
 
-export function LoadMore(props: LoadMoreProps) {
+export function Next(props: NextProps) {
   const { chatId } = props;
-  const [loadMore, { isFetching }] = useLoadMore({ chatId });
+  const [fetchNext, { isFetching }] = useFetchNextMutation({ chatId });
   const [intersecting, setIntersecting] = useState(false);
   const ref = useRef<HTMLDivElement | null>(null);
+  const timerRef = useRef<NodeJS.Timer>();
 
   const observer = useMemo(
-    () => new IntersectionObserver(([entry]) => setIntersecting((prev) => prev || entry.isIntersecting)),
+    () =>
+      new IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+          timerRef.current = setTimeout(() => setIntersecting(true), 200);
+        } else {
+          clearTimeout(timerRef.current!);
+        }
+      }),
     [],
   );
 
@@ -27,14 +35,14 @@ export function LoadMore(props: LoadMoreProps) {
       return;
     }
 
-    loadMore();
+    fetchNext();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [intersecting]);
 
-  if (isFetching) {
+  if (isFetching || intersecting) {
     return <MessageSkeleton count={4} />;
   }
 
-  return <div ref={ref} />;
+  return <div className="wxchtf-next" ref={ref}></div>;
 }

package/src/ui/SendingMessage/SendingMessageBox.tsx

@@ -0,0 +1,16 @@
+import { File } from '../../core';
+import { customize } from '../customize';
+import { SendingMessageContent } from './SendingMessageContent';
+
+export interface SendingMessageBoxProps {
+  text: string;
+  files: File[];
+}
+
+export const SendingMessageBox = customize('SendingMessageBox', (props: SendingMessageBoxProps) => {
+  return (
+    <div className="wxchtf-sending-message">
+      <SendingMessageContent {...props} />
+    </div>
+  );
+});

package/src/ui/SendingMessage/SendingMessageContent.tsx

@@ -0,0 +1,13 @@
+import { customize } from '../customize';
+import { SendingMessageText } from './SendingMessageText';
+import { SendingMessageInfoBox } from './SendingMessageInfoBox';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageContent = customize('SendingMessageContent', (props: SendingMessageBoxProps) => {
+  return (
+    <div className="wxchtf-sending-message-content">
+      <SendingMessageText {...props} />
+      <SendingMessageInfoBox {...props} />
+    </div>
+  );
+});

package/src/ui/SendingMessage/SendingMessageInfoBox.tsx

@@ -0,0 +1,13 @@
+import { customize } from '../customize';
+import { useLocalizer } from '../localizer';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageInfoBox = customize('SendingMessageInfoBox', (_: SendingMessageBoxProps) => {
+  const localizer = useLocalizer();
+
+  return (
+    <div className="wxchtf-sending-message-info-box">
+      <div className="wxchtf-sending-message-sending-box">{localizer.message.sending()}</div>
+    </div>
+  );
+});

package/src/ui/SendingMessage/SendingMessageText.tsx

@@ -0,0 +1,7 @@
+import { customize } from '../customize';
+import type { SendingMessageBoxProps } from './SendingMessageBox';
+
+export const SendingMessageText = customize('SendingMessageText', (props: SendingMessageBoxProps) => {
+  const { text } = props;
+  return <div className="wxchtf-sending-message-text">{text}</div>;
+});

package/src/ui/SendingMessage/index.ts

@@ -0,0 +1,4 @@
+export * from './SendingMessageBox';
+export * from './SendingMessageContent';
+export * from './SendingMessageInfoBox';
+export * from './SendingMessageText';

package/src/ui/SystemMessage/SystemMessageBox.tsx

@@ -0,0 +1,20 @@
+import { useRef } from 'react';
+import { customize } from '../customize';
+import { Message } from '../../core';
+import { MessageReadObserver } from '../MessageReadObserver';
+import { SystemMessageRow } from './SystemMessageRow';
+
+export interface SystemMessageBoxProps {
+  message: Message;
+}
+
+export const SystemMessageBox = customize('SystemMessageBox', (props: SystemMessageBoxProps) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <MessageReadObserver messageRef={ref} {...props} />
+      <SystemMessageRow containerRef={ref} {...props} />
+    </>
+  );
+});

package/src/ui/SystemMessage/SystemMessageRow.tsx

@@ -0,0 +1,43 @@
+import { Ref } from 'react';
+import { customize } from '../customize';
+import { Localizer, useLocalizer } from '../localizer';
+import { Message } from '../../core';
+
+export interface SystemMessageRowProps {
+  message: Message;
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode {
+  if (text === 'chatify://chat-created') {
+    return localizer.system.chatCreated();
+  }
+
+  if (text.startsWith('chatify://member-added')) {
+    return localizer.system.memberAdded();
+  }
+
+  if (text.startsWith('chatify://member-removed')) {
+    return localizer.system.memberRemoved();
+  }
+
+  if (text.startsWith('chatify://chat-name-changed::')) {
+    const data = JSON.parse(text.substring('chatify://chat-name-changed::'.length));
+    return localizer.system.chatNameChanged(data.newName);
+  }
+
+  return text;
+}
+
+export const SystemMessageRow = customize('SystemMessageRow', (props: SystemMessageRowProps) => {
+  const { message, containerRef } = props;
+  const { text, sentAt } = message;
+  const localizer = useLocalizer();
+
+  return (
+    <div ref={containerRef} className="wxchtf-system-message">
+      <div className="wxchtf-text">{formatSystemMessage(localizer, text)}</div>
+      <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
+    </div>
+  );
+});

package/src/ui/SystemMessage/index.ts

@@ -0,0 +1,2 @@
+export * from './SystemMessageBox';
+export * from './SystemMessageRow';

package/src/{util → ui}/customize.tsx

@@ -1,8 +1,7 @@
 import React, { FC, PropsWithChildren, useContext } from 'react';
 
-export type Customizable<TComponent extends React.ComponentType<any>, TKey extends string> = TComponent & {
+export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
   Component: TComponent;
-  key: TKey;
 };
 
 const CustomizeContext = React.createContext<CustomizeProviderValue>(null!);
@@ -21,10 +20,10 @@ function useCustom<TComponent extends React.ComponentType>(key: string): TCompon
   return value[key] as TComponent | null | undefined;
 }
 
-export function customize<TComponent extends React.ComponentType<any>, TKey extends string>(
-  key: TKey,
+export function customize<TComponent extends React.ComponentType<any>>(
+  key: string,
   Component: TComponent,
-): Customizable<TComponent, TKey> {
+): TComponent extends React.ComponentType<infer X> ? Customizable<React.ComponentType<X>> : never {
   const Result: FC<any> = React.forwardRef<TComponent, any>((props: any, forwardRef) => {
     const Custom = useCustom(key);
 
@@ -39,6 +38,7 @@ export function customize<TComponent extends React.ComponentType<any>, TKey exte
     return <Component {...props} ref={forwardRef} />;
   });
 
+  Component.displayName = Component.displayName || key;
   Result.displayName = 'Customizable.' + Component.displayName;
 
   return Object.assign(Result, { key, Component }) as any;

package/src/ui/index.ts

@@ -2,10 +2,10 @@ export * from './Chatify';
 export * from './Avatar';
 export * from './localizer';
 export * from './AddChatButton';
-export * from './Header';
-export * from './ChatHeader';
-export * from './ChatHeaderMembers';
-export * from './ChatListItem';
-export * from './Message';
-export * from './SystemMessage';
+export * from './Layout/Header';
+export * from './ChatPanel/ChatHeader';
+export * from './ChatPanel/ChatHeaderMembers';
+export * from './ChatList/ChatListItemBox';
+export * from './Message/MessageBox';
+export * from './SystemMessage/SystemMessageBox';
 export * from './Icon';

package/src/ui/localizer.tsx

@@ -6,6 +6,8 @@ export interface Localizer {
   system: {
     chatCreated: () => string;
     memberAdded: () => string;
+    memberRemoved: () => string;
+    chatNameChanged: (newName: string) => string;
   };
   message: {
     read: () => React.ReactNode;
@@ -29,6 +31,10 @@ export interface Localizer {
   input: {
     placeholder: () => string;
   };
+
+  settings: {
+    members: () => string;
+  };
 }
 
 export const LocalizerContext = React.createContext<Localizer>(null!);
@@ -60,9 +66,15 @@ export const defaultLocalizer: Localizer = {
   system: {
     chatCreated: () => 'Chat created',
     memberAdded: () => 'New member added',
+    memberRemoved: () => 'Member removed',
+    chatNameChanged: (newName: string) => `Chat name changed to '${newName}'`,
   },
 
   input: {
     placeholder: () => 'Start typing (Ctrl/⌘Cmd + Enter to send) ...',
   },
+
+  settings: {
+    members: () => 'Members',
+  },
 };

package/src/util/index.ts

@@ -1,3 +1,2 @@
 export * from './uniqBy';
 export * from './uniqId';
-export * from './customize';

package/dist/cjs/index.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@microsoft/signalr"),s=require("react"),a=require("shallow-equal"),n=require("antd"),i=require("dayjs"),c=require("@ant-design/icons"),r=require("is-hotkey"),d=require("@ant-design/icons/SendOutlined"),o=require("@ant-design/icons/FileAddOutlined");function u(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var a=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,a.get?a:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var l=u(t);function h(e,t,s,a){return new(s||(s=Promise))((function(n,i){function c(e){try{d(a.next(e))}catch(e){i(e)}}function r(e){try{d(a.throw(e))}catch(e){i(e)}}function d(e){var t;e.done?n(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(c,r)}d((a=a.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const m={hubUri:"/api/chatify/hub",headersFactory:()=>Promise.resolve({})},g=["chatify://new-message","chatify://chat-created","chatify://read","chatify://member-added","chatify://member-removed"];function x(e,t,s){const a=s((e=Object.assign(Object.assign({},e),{query:Object.assign({},e.query)})).query[t]);return a&&(e.query[t]=a),e}function j(e,t,s){const a=s((e=Object.assign(Object.assign({},e),{mutation:Object.assign({},e.mutation)})).mutation[t]);return a&&(e.mutation[t]=a),e}const b={query_fetch:(e,{key:t})=>x(e,t,(e=>Object.assign(Object.assign({},e),{isFetching:!0,uninitialized:!1}))),query_resolve:(e,{key:t,data:s})=>x(e,t,(e=>Object.assign(Object.assign({},e),{isFetching:!1,error:void 0,data:s}))),query_reject:(e,{key:t,error:s})=>x(e,t,(e=>Object.assign(Object.assign({},e),{isFetching:!1,error:s}))),mutation_fetch:(e,{key:t})=>j(e,t,(e=>Object.assign(Object.assign({},e),{isFetching:!0}))),mutation_resolve:(e,{key:t})=>j(e,t,(e=>Object.assign(Object.assign({},e),{isFetching:!1,error:void 0}))),mutation_reject:(e,{key:t,error:s})=>j(e,t,(e=>Object.assign(Object.assign({},e),{isFetching:!1,error:s}))),update:(e,{mutation:t})=>t(e),chat_open:(e,{chatId:t})=>Object.assign(Object.assign({},e),{ui:Object.assign(Object.assign({},e.ui),{view:"chat",chatId:t})}),new_chat_open:e=>Object.assign(Object.assign({},e),{ui:Object.assign(Object.assign({},e.ui),{view:"new-chat",chatId:void 0})}),chat_settings_open:(e,{chatId:t})=>Object.assign(Object.assign({},e),{ui:Object.assign(Object.assign({},e.ui),{view:"chat-settings",chatId:t})}),message_received:(e,{message:t,requestId:s})=>{var a;return void 0!==(null===(a=e.query["messages."+t.chatId])||void 0===a?void 0:a.data)&&(e=Object.assign(Object.assign({},e),{query:Object.assign(Object.assign({},e.query),{["messages."+t.chatId]:Object.assign(Object.assign({},e.query["messages."+t.chatId]),{data:[Object.assign({type:"message"},t),...e.query["messages."+t.chatId].data].filter((e=>"sending"!==e.type||e.requestId!==s))})})})),void 0!==e.query["chat-list"].data&&(e=Object.assign(Object.assign({},e),{query:Object.assign(Object.assign({},e.query),{"chat-list":Object.assign(Object.assign({},e.query["chat-list"]),{data:e.query["chat-list"].data.map((e=>e.id===t.chatId?Object.assign(Object.assign({},e),{message:t,unreadCount:t.read?e.unreadCount:e.unreadCount+1}):e))})})})),e},chat_created:(e,{chat:t})=>{var s;return void 0===(null===(s=e.query["chat-list"])||void 0===s?void 0:s.data)?e:Object.assign(Object.assign({},e),{query:Object.assign(Object.assign({},e.query),{"chat-list":Object.assign(Object.assign({},e.query["chat-list"]),{data:[t,...e.query["chat-list"].data]})})})},read:(e,{id:t,timestamp:s})=>Object.assign(Object.assign({},e),{read:Object.assign(Object.assign({},e.read),{queued:[...e.read.queued,t],timestamp:s})}),read_send:(e,{ids:t})=>Object.assign(Object.assign({},e),{read:Object.assign(Object.assign({},e.read),{queued:e.read.queued.filter((e=>!t.includes(e))),sent:[...e.read.sent,...t]})}),read_reject:(e,{ids:t,timestamp:s})=>Object.assign(Object.assign({},e),{read:Object.assign(Object.assign({},e.read),{queued:[...e.read.queued,...t],sent:e.read.sent.filter((e=>!t.includes(e))),timestamp:s})}),read_received:(e,{events:t})=>{var s,a;const n=t.map((e=>e.messageId));e=Object.assign(Object.assign({},e),{query:Object.assign({},e.query),read:Object.assign(Object.assign({},e.read),{sent:e.read.sent.filter((e=>!n.includes(e)))})}),Object.keys(e.query).filter((e=>e.startsWith("messages."))).forEach((t=>{var s;e.query[t]=Object.assign({},e.query[t]);const a=e.query[t];a.data=null===(s=a.data)||void 0===s?void 0:s.map((e=>"message"===e.type&&n.includes(e.id)?Object.assign(Object.assign({},e),{read:!0}):e))})),e.query["chat-list"]=Object.assign({},e.query["chat-list"]);const i=e.query["chat-list"];return i.data=null===(s=i.data)||void 0===s?void 0:s.map((e=>n.includes(e.message.id)?Object.assign(Object.assign({},e),{message:Object.assign(Object.assign({},e.message),{read:!0})}):e)),i.data=null===(a=i.data)||void 0===a?void 0:a.map((e=>Object.assign(Object.assign({},e),{unreadCount:e.unreadCount-t.filter((t=>t.chatId===e.id)).length}))),e},member_added:(e,{chatId:t,chatName:s,account:a,me:n,message:i})=>{var c,r;if(void 0!==(null===(c=(e=Object.assign(Object.assign({},e),{query:Object.assign({},e.query)})).query["chat."+t])||void 0===c?void 0:c.data)&&(e.query["chat."+t]=Object.assign(Object.assign({},e.query["chat."+t]),{data:Object.assign({},e.query["chat."+t].data)}),e.query["chat."+t].data.members=[...e.query["chat."+t].data.members,a]),void 0!==(null===(r=e.query["messages."+t])||void 0===r?void 0:r.data)&&(e.query["messages."+t]=Object.assign(Object.assign({},e.query["messages."+t]),{data:[Object.assign({type:"message"},i),...e.query["messages."+t].data]})),a.id!==n&&void 0!==e.query["chat-list"].data&&(e.query["chat-list"]=Object.assign({},e.query["chat-list"]),e.query["chat-list"].data=e.query["chat-list"].data.map((e=>e.id===t?Object.assign(Object.assign({},e),{message:Object.assign({},i)}):e))),a.id===n&&void 0!==e.query["chat-list"].data){const a={id:t,name:s,message:Object.assign({},i),unreadCount:0};e.query["chat-list"]=Object.assign(Object.assign({},e.query["chat-list"]),{data:[...e.query["chat-list"].data,a]})}return e},member_removed:(e,{chatId:t,accountId:s,deleteHistory:a,me:n})=>{var i,c,r,d,o;return void 0!==(null===(i=(e=Object.assign(Object.assign({},e),{query:Object.assign({},e.query)})).query["chat."+t])||void 0===i?void 0:i.data)&&(e.query["chat."+t]=Object.assign(Object.assign({},e.query["chat."+t]),{data:Object.assign({},e.query["chat."+t].data)}),e.query["chat."+t].data.members=e.query["chat."+t].data.members.filter((e=>e.id!==s))),s===n&&a&&(null===(c=e.query["chat-list"])||void 0===c?void 0:c.data)&&(e.query["chat-list"]=Object.assign({},e.query["chat-list"]),e.query["chat-list"].data=e.query["chat-list"].data.filter((e=>e.id!==t))),s===n&&a&&(null===(r=e.query["chat-list"])||void 0===r?void 0:r.data)&&e.ui.chatId===t&&(e.ui=Object.assign(Object.assign({},e.ui),{chatId:null===(o=null===(d=e.query["chat-list"])||void 0===d?void 0:d.data.at(0))||void 0===o?void 0:o.id})),e}},y={ui:{},query:{},mutation:{},read:{queued:[],sent:[],timestamp:0}};function f(){const e=s.useRef(y),t=s.useRef([]),a=s.useCallback((s=>{const a=function(e,t){const s=b[t.type](e,t.data);return console.debug("[Chatify]: ",t,s),s}(e.current,s);e.current!==a&&(e.current=a,t.current.forEach((e=>e(a))))}),[]),n=s.useCallback((e=>(t.current.push(e),()=>{t.current=t.current.filter((t=>t!==e))})),[]);return[e,a,n]}const p=s.createContext(null);function v({children:t}){const s=f();return e.jsx(p.Provider,{value:s,children:t})}function O(){return s.useContext(p)[1]}function q(){const[e]=s.useContext(p);return e}function C(e,t){const[n,,i]=s.useContext(p),c=s.useRef(e(n.current)),[r,d]=s.useState(c.current);return s.useEffect((()=>{const t=e(n.current);return a.shallowEqual(c.current,t)||(c.current=t,d(t)),i((t=>{const s=e(t);a.shallowEqual(s,c.current)||(c.current=s,d(s))}))}),[]),r}function I(e,t){const a=O();s.useEffect((()=>{let s=[];return t.connect().then((()=>{s.push(t.subscribe("chatify://new-message",(([e,t])=>{a({type:"message_received",data:{message:e,requestId:t}})}))),s.push(t.subscribe("chatify://chat-created",(([e,t])=>{a({type:"chat_created",data:{chat:e,requestId:t}})}))),s.push(t.subscribe("chatify://read",(([e])=>{a({type:"read_received",data:{events:e}})}))),s.push(t.subscribe("chatify://member-added",(([t,s,n,i])=>{a({type:"member_added",data:{chatId:t,chatName:s,account:n,me:e,message:i}})}))),s.push(t.subscribe("chatify://member-removed",(([t,s,n])=>{a({type:"member_removed",data:{chatId:t,accountId:s,deleteHistory:n,me:e}})})))})),()=>{s.forEach((e=>e()))}}),[])}const w=s.createContext(null),N=s.createContext(null);function k(){return s.useContext(N)}function _(){return s.useContext(w)}function M(t){const{children:s}=t;return I(_(),k()),e.jsx(e.Fragment,{children:s})}const S={uninitialized:!1,isFetching:!0,data:void 0,error:void 0};function F(e,t){return e.query[t]}function R(e){const{key:t,queryFn:a}=e,n=q(),i=O(),c=function(e){return C((t=>F(t,e)))}(e.key);return s.useEffect((()=>{F(n.current,t)||(i({type:"query_fetch",data:{key:t}}),a().then((e=>i({type:"query_resolve",data:{key:t,data:e}}))).catch((e=>i({type:"query_reject",data:{key:t,error:e}}))))}),[]),null!=c?c:S}function B(e){const{chatId:t}=e,s=k();return R({key:"chat."+t,queryFn:()=>s.chat(t)})}function A(){const e=k();return R({key:"chat-list",queryFn:()=>e.chats()})}const L={isFetching:!1,error:void 0};function E(e){const{key:t,queryFn:a,onQueryStarted:n}=e,i=O(),c=q(),r=C((t=>t.mutation[e.key])),d=s.useCallback((e=>{i({type:"mutation_fetch",data:{key:t}});const s=a(e);s.then((()=>{i({type:"mutation_resolve",data:{key:t}})})).catch((e=>i({type:"mutation_reject",data:{key:t,error:e}}))),n&&n(e,{promise:s,state:c.current,updateState:e=>{i({type:"update",data:{mutation:e}})}})}),[]);return[d,null!=r?r:L]}function H({chatId:e}){const t=q(),s=k();return E({key:"more."+e,queryFn:()=>s.messages({chatId:e,skip:t.current.query["messages."+e].data.filter((e=>"message"===e.type)).length,take:15}),onQueryStarted:(t,{promise:s,updateState:a})=>h(this,void 0,void 0,(function*(){const t=yield s;a((s=>{var a;(s=Object.assign({},s)).query=Object.assign({},s.query),s.query["messages."+e]=Object.assign({},s.query["messages."+e]);const n=s.query["messages."+e];return n.data=null===(a=n.data)||void 0===a?void 0:a.filter((e=>"more"!==e.type)),n.data=[...n.data,...t.map((e=>Object.assign(Object.assign({type:"message"},e),{proceed:!0})))],15===t.length&&(n.data=[...n.data,{type:"more"}]),s}))}))})}function T(e){const{chatId:t}=e,s=k();return R({key:"messages."+t,queryFn:()=>s.messages({chatId:t,skip:0,take:15}).then((e=>{const t=e.map((e=>Object.assign(Object.assign({type:"message"},e),{proceed:!0})));return 15===e.length?[...t,{type:"more"}]:t}))})}function P(){const e=k();return R({key:"accounts",queryFn:()=>e.accounts()})}function z(){const e=k();return E({key:"add-chat",queryFn:t=>e.addChat(t)})}function U(){const e=k(),[t,a]=C((e=>[e.read.queued,e.read.timestamp])),n=O(),i=s.useRef(null);s.useEffect((()=>{0!==t.length&&(i.current&&clearTimeout(i.current),i.current=setTimeout((()=>{n({type:"read_send",data:{ids:t}}),e.read({ids:t}).catch((()=>n({type:"read_reject",data:{ids:t,timestamp:(new Date).getTime()}})))}),100))}),[a])}function D(){const e=k();return E({key:"add-member",queryFn:t=>e.addMember(t)})}function $(){const e=k();return E({key:"remove-member",queryFn:t=>e.removeMember(t)})}const K=s.createContext(null);function Q(){return s.useContext(K)}const W={timestamp:e=>i(e).format("HH:mm"),message:{read:()=>"Read",reading:()=>"Reading...",sending:()=>"Sending..."},addChat:{title:()=>"Add chat",name:{label:()=>"Name",required:()=>"Name is required",max250:()=>"Max 250 characters allowed"},members:{label:()=>"Members",required:()=>"Members is required"},submitBtn:()=>"Submit"},system:{chatCreated:()=>"Chat created",memberAdded:()=>"New member added"},input:{placeholder:()=>"Start typing (Ctrl/⌘Cmd + Enter to send) ..."}};function G(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}const J=s.createContext(null);function V(t){const{children:s,value:a}=t;return e.jsx(J.Provider,{value:a,children:s})}function X(t,a){const n=s.forwardRef(((n,i)=>{const c=function(e){return s.useContext(J)[e]}(t);return null===c?null:c?e.jsx(c,Object.assign({},n,{ref:i})):e.jsx(a,Object.assign({},n,{ref:i}))}));return n.displayName="Customizable."+a.displayName,Object.assign(n,{key:t,Component:a})}function Y(e,t){return"chatify://chat-created"===t?e.system.chatCreated():t.startsWith("chatify://member-added::")?e.system.memberAdded():t}const Z=X("SystemMessage",(t=>{const{text:s,sentAt:a}=t,n=Q();return e.jsxs("div",{className:"wxchtf-system-message",children:[e.jsx("div",{className:"wxchtf-text",children:Y(n,s)}),e.jsx("div",{className:"wxchtf-timestamp",children:n.timestamp(a)})]})})),ee=t=>{const{account:s}=t;return e.jsx(n.Avatar,{src:s.avatar})};ee.displayName="Avatar";const te=X("Avatar",ee),se=t=>{const{name:s}=t;return e.jsx(e.Fragment,{children:s})};se.displayName="ChatName";const ae=X("ChatName",se),ne=t=>{const{name:s}=t.chat;return e.jsx("div",{className:"wxchtf-chat-name",children:e.jsx(ae,{name:s})})};ne.displayName="ChatListItemName";const ie=X("ChatListItemName",ne),ce=t=>{const{unreadCount:s}=t.chat;return s<=0?null:e.jsx("div",{className:"wxchtf-unread-count",children:s})};ce.displayName="ChatListItemUnreadCount";const re=X("ChatListItemUnreadCount",ce),de=t=>e.jsxs("div",{className:"wxchtf-chat-last",children:[e.jsx(ue,Object.assign({},t)),e.jsx(le,Object.assign({},t))]});de.displayName="ChatListItemLastMessage";const oe=X("ChatListItemLastMessage",de),ue=X("ChatListItemLastMessageAuthor",(t=>{const{message:s}=t.chat;return"chatify::system"===s.sentBy.id?null:e.jsxs("div",{className:"wxchtf-chat-last-author",children:[e.jsx(te,{account:s.sentBy})," ",s.sentBy.name]})})),le=X("ChatListItemLastMessageContent",(t=>{const{message:s}=t.chat,a=Q();return e.jsx("div",{className:"wxchtf-chat-last-message",children:"chatify::system"===s.sentBy.id?Y(a,s.text):s.text})})),he=t=>{const{message:s}=t.chat;return e.jsxs("div",{className:"wxchtf-chat"+(s.read?"":" --unread"),children:[e.jsx(ie,Object.assign({},t)),e.jsx(re,Object.assign({},t)),e.jsx(oe,Object.assign({},t))]})};he.displayName="ChatListItemBox";const me=X("ChatListItemBox",he);function ge(){const t=C((e=>e.ui.chatId)),a=O(),i=s.useMemo((()=>t?[t]:[]),[t]),c=s.useCallback((e=>a({type:"chat_open",data:{chatId:e.selectedKeys[0]}})),[a]),{data:r}=A(),d=s.useMemo((()=>r?r.map((t=>({key:t.id,label:e.jsx(me,{chat:t})}))):[]),[r]);return s.useEffect((()=>{!t&&r&&r.length>0&&a({type:"chat_open",data:{chatId:r[0].id}})}),[r,a]),e.jsx("div",{className:"wxchtf-aside",children:r&&e.jsx(n.Menu,{className:"wxchtf-chats",selectedKeys:i,onSelect:c,items:d})})}function xe(){const[t,{isFetching:a}]=z(),{data:i,isFetching:c}=P(),r=Q(),d=s.useMemo((()=>null==i?void 0:i.map((e=>({value:e.id,label:e.name})))),[i]),o=s.useCallback((e=>t({name:e.name,members:e.members,requestId:G()})),[t]);return e.jsxs("div",{className:"wxchtf-add-chat",children:[e.jsx("h3",{children:r.addChat.title()}),e.jsxs(n.Form,{onFinish:o,layout:"vertical",disabled:a,children:[e.jsx(n.Form.Item,{name:"name",label:r.addChat.name.label(),rules:[{required:!0,message:r.addChat.name.required()},{max:250,message:r.addChat.name.max250()}],children:e.jsx(n.Input,{})}),e.jsx(n.Form.Item,{name:"members",label:r.addChat.members.label(),rules:[{required:!0,message:r.addChat.members.required()}],children:e.jsx(n.Select,{mode:"multiple",loading:c,options:d})}),e.jsx(n.Button,{loading:a,type:"primary",block:!0,htmlType:"submit",children:r.addChat.submitBtn()})]})]})}const je=t=>{const{id:s}=t,{data:a}=B({chatId:s});return(null==a?void 0:a.members)?e.jsx(n.Avatar.Group,{maxCount:5,children:a.members.map((t=>e.jsx(n.Tooltip,{title:t.name,children:e.jsx(n.Avatar,{src:t.avatar,children:t.name})},t.id)))}):null};je.displayName="ChatHeaderMembers";const be=X("ChatHeaderMembers",je),ye=t=>{const{id:a}=t,i=O(),r=s.useCallback((()=>i({type:"chat_settings_open",data:{chatId:a}})),[i]);return e.jsx(n.Button,{onClick:r,type:"link",icon:e.jsx(c.SettingOutlined,{})})};ye.displayName="ChatSettingsButton";const fe=X("ChatSettingsButton",ye);function pe(t){var s;const{id:a}=t,{data:i}=B({chatId:a}),c=C((e=>{var t;return null===(t=e.query["chat-list"].data)||void 0===t?void 0:t.find((e=>e.id===a))})),r=null!==(s=null==i?void 0:i.name)&&void 0!==s?s:null==c?void 0:c.name;return e.jsx("div",{className:"wxchtf-chat-header",children:e.jsxs(n.Row,{justify:"space-between",align:"middle",children:[e.jsx(n.Col,{className:"wxchtf-chat-name",children:r&&e.jsx(ae,{name:r})}),e.jsx(n.Col,{className:"wxchtf-chat-members",children:e.jsxs(n.Space,{align:"center",children:[e.jsx(be,{id:a}),e.jsx(fe,{id:a})]})})]})})}const ve=X("MessageAuthor",(t=>{const{sentBy:s}=t.message;return e.jsx("div",{className:"wxchtf-message-author",children:e.jsx(te,{account:s})})})),Oe=X("MessageText",(t=>{const{text:s}=t.message;return e.jsx("div",{className:"wxchtf-message-text",children:s})})),qe=X("MessageInfoBox",(t=>{const{message:s}=t,{id:a,sentBy:n,sentAt:i,read:c}=s,r=_(),d=n.id===r,o=Q(),u=C((e=>e.read.queued.includes(a)));return e.jsxs("div",{className:"wxchtf-message-info-box",children:[e.jsx("div",{className:"wxchtf-message-sent-at",children:o.timestamp(i)}),void 0!==c&&!d&&e.jsx("div",{className:"wxchtf-message-read-box",children:u?o.message.reading():o.message.read()})]})})),Ce=X("MessageContent",(t=>e.jsxs("div",{className:"wxchtf-message-content",children:[e.jsx(Oe,Object.assign({},t)),e.jsx(qe,Object.assign({},t))]}))),Ie=X("MessageRow",(t=>{const{message:s,containerRef:a}=t,{sentBy:n}=s,i=_(),c=n.id===i;return e.jsxs("div",{ref:a,className:"wxchtf-message"+(c?" --my":""),children:[e.jsx(ve,Object.assign({},t)),e.jsx(Ce,Object.assign({},t))]})})),we=X("MessageBox",(t=>{const a=s.useRef(null);return e.jsxs(e.Fragment,{children:[e.jsx(Ne,Object.assign({messageRef:a},t)),e.jsx(Ie,Object.assign({containerRef:a},t))]})})),Ne=X("MessageReadObserver",(t=>{const{message:a,messageRef:n}=t,i=O(),c=s.useRef(!1),r=s.useMemo((()=>new IntersectionObserver((([e])=>{!e.isIntersecting||c.current||a.read||(c.current=!0,i({type:"read",data:{id:a.id,timestamp:(new Date).getTime()}}))}))),[]);return s.useEffect((()=>(r.observe(n.current),()=>r.disconnect())),[r]),e.jsx(e.Fragment,{})}));function ke(t){const{count:s=1}=t;return e.jsx(e.Fragment,{children:Array.from(Array(s)).map(((t,s)=>e.jsxs("div",{className:"wxchtf-message-skeleton",children:[e.jsx(n.Skeleton.Avatar,{className:"wxchtf-avatar",active:!0}),e.jsx(n.Skeleton.Button,{active:!0,className:"wxchtf-content"})]},s)))})}function _e(t){const{chatId:a}=t,[n,{isFetching:i}]=H({chatId:a}),[c,r]=s.useState(!1),d=s.useRef(null),o=s.useMemo((()=>new IntersectionObserver((([e])=>r((t=>t||e.isIntersecting))))),[]);return s.useEffect((()=>(o.observe(d.current),()=>o.disconnect())),[o]),s.useEffect((()=>{c&&n()}),[c]),i?e.jsx(ke,{count:4}):e.jsx("div",{ref:d})}const Me=X("SendingMessageText",(t=>{const{text:s}=t;return e.jsx("div",{className:"wxchtf-sending-message-text",children:s})})),Se=X("SendingMessageInfoBox",(()=>{const t=Q();return e.jsx("div",{className:"wxchtf-sending-message-info-box",children:e.jsx("div",{className:"wxchtf-sending-message-sending-box",children:t.message.sending()})})})),Fe=X("SendingMessageContent",(t=>e.jsxs("div",{className:"wxchtf-sending-message-content",children:[e.jsx(Me,Object.assign({},t)),e.jsx(Se,Object.assign({},t))]}))),Re=X("SendingMessage",(t=>e.jsx("div",{className:"wxchtf-sending-message",children:e.jsx(Fe,Object.assign({},t))})));function Be(t){const{id:s}=t,{data:a}=T({chatId:s});return e.jsxs("div",{className:"wxchtf-chat-body",children:[!a&&e.jsx(ke,{count:5}),null==a?void 0:a.map(((t,a)=>{if("message"===t.type&&"chatify::system"===t.sentBy.id)return e.jsx(Z,{text:t.text,sentAt:t.sentAt});switch(t.type){case"message":return e.jsx(we,{message:t},t.id);case"sending":return e.jsx(Re,{text:t.text,files:t.files},t.requestId);case"more":return e.jsx(_e,{chatId:s},a);default:return null}}))]})}const Ae={attach:o,send:d},Le=X("Icon",(t=>{const{type:s}=t,a=Ae[s];return a?e.jsx(a,{}):null})),Ee=r("ctrl+enter");function He(){const t=C((e=>e.ui.chatId)),[a]=function(e){const{chatId:t}=e,s=k();return E({key:"add."+t,queryFn:e=>s.send(Object.assign({chatId:t},e)),onQueryStarted:(e,{updateState:s})=>h(this,void 0,void 0,(function*(){s((s=>{const a=(s=Object.assign(Object.assign({},s),{query:Object.assign(Object.assign({},s.query),{["messages."+t]:Object.assign({},s.query["messages."+t])})})).query["messages."+t];return a.data=[{type:"sending",text:e.text,requestId:e.requestId,files:e.files},...a.data],s}))}))})}({chatId:t}),[i,c]=s.useState(""),r=Q(),d=s.useCallback((()=>{c(""),a({text:i,files:[],requestId:G()})}),[t,i]);return e.jsx("div",{className:"wxchtf-input-form",children:e.jsxs("div",{className:"wxchtf-input-box",children:[e.jsx("div",{className:"wxchtf-add-files-box",children:e.jsx(n.Button,{type:"link",icon:e.jsx(Le,{type:"attach"}),className:"wxchtf-add-files-btn"})}),e.jsx("div",{className:"wxchtf-text-input-box",children:e.jsx(n.Input.TextArea,{value:i,onChange:e=>c(e.target.value),autoSize:{maxRows:5},className:"wxchtf-text-input-textarea",placeholder:r.input.placeholder(),onKeyDown:e=>{Ee(e)&&d()}})}),e.jsx("div",{className:"wxchtf-submit-btn-box",children:e.jsx(n.Button,{onClick:d,type:"link",icon:e.jsx(Le,{type:"send"}),className:"wxchtf-submit-btn"})})]})})}function Te(t){const{id:s}=t,a=_(),{data:n}=B({chatId:s}),i=!0===(null==n?void 0:n.members.map((e=>e.id)).includes(a));return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"wxchtf-chat",children:[e.jsx(pe,{id:s}),e.jsx(Be,{id:s})]}),i&&e.jsx(He,{})]})}function Pe(t){const{account:a,chatId:i}=t,[r]=$(),d=s.useCallback((()=>r({chatId:i,accountId:a.id,deleteHistory:!1})),[r,i,a.id]);return e.jsxs(n.List.Item,{children:[a.name," ",e.jsx(n.Button,{onClick:d,type:"link",icon:e.jsx(c.CloseOutlined,{})})]})}function ze(){const[t]=C((e=>[e.ui.chatId])),{data:a}=B({chatId:t}),[i]=D(),{data:r}=P(),d=s.useMemo((()=>null==r?void 0:r.map((e=>({value:e.id,label:e.name})))),[r]),o=s.useCallback((e=>i({chatId:t,accountId:e,withHistory:!0})),[i,t]);return a?e.jsxs("div",{className:"wxchtf-chat-settings",children:[e.jsxs(n.Row,{justify:"space-between",children:[e.jsx(n.Col,{children:e.jsx("h3",{className:"wxchtf-title",children:a.name})}),e.jsx(n.Col,{children:e.jsx(n.Button,{type:"link",icon:e.jsx(c.CloseOutlined,{})})})]}),e.jsx("h4",{children:"Members"}),e.jsx(n.List,{dataSource:a.members,rowKey:"id",renderItem:s=>e.jsx(Pe,{account:s,chatId:t})}),e.jsx(n.Select,{style:{width:"350px"},options:d,value:null,onSelect:o})]}):null}function Ue(){const{view:t,chatId:s}=C((e=>({view:e.ui.view,chatId:e.ui.chatId})));return e.jsxs("div",{className:"wxchtf-main",children:["chat"===t&&s&&e.jsx(Te,{id:s},s),"new-chat"===t&&e.jsx(xe,{}),"chat-settings"===t&&e.jsx(ze,{})]})}const De=()=>{const t=O(),a=s.useCallback((()=>t({type:"new_chat_open",data:void 0})),[t]);return e.jsx(n.Button,{onClick:a,icon:"+",type:"link",children:"Add chat"})};De.displayName="AddChatButton";const $e=X("AddChatButton",De),Ke=()=>e.jsx("div",{className:"wxchtf-header",children:e.jsx($e,{})});Ke.displayName="Header";const Qe=X("Header",Ke),We=()=>e.jsx("div",{className:"wxchtf-footer"});We.displayName="Footer";const Ge=X("Footer",We);function Je(t){const{className:s="",style:a}=t;return U(),e.jsxs("div",{className:s+" wxchtf-chatify",style:a,children:[e.jsx(Qe,{}),e.jsxs("div",{className:"wxchtf-body",children:[e.jsx(ge,{}),e.jsx(Ue,{})]}),e.jsx(Ge,{})]})}const Ve={},Xe=t=>{const{localizer:s=W,customize:a=Ve}=t;return e.jsx(K.Provider,{value:s,children:e.jsx(V,{value:a,children:e.jsx(Je,Object.assign({},t))})})};Xe.displayName="Chatify",exports.ACTIONS=b,exports.AddChatButton=$e,exports.Avatar=te,exports.ChatHeader=pe,exports.ChatHeaderMembers=be,exports.ChatListItemBox=me,exports.ChatListItemLastMessage=oe,exports.ChatListItemLastMessageAuthor=ue,exports.ChatListItemLastMessageContent=le,exports.ChatListItemName=ie,exports.ChatListItemUnreadCount=re,exports.Chatify=Xe,exports.ChatifyClient=class{constructor(e){this._connection=null,this._subscribers={},this._reconnectSubscribers=[],this.connect=()=>h(this,void 0,void 0,(function*(){const e=yield this._config.signalR.headersFactory();this._connection=(new l.HubConnectionBuilder).withUrl(this._config.signalR.hubUri,{accessTokenFactory:this._config.signalR.accessTokenFactory?this._config.signalR.accessTokenFactory:void 0,headers:e}).withAutomaticReconnect().build(),g.forEach((e=>{this._connection.on(e,((...t)=>{var s;null===(s=this._subscribers[e])||void 0===s||s.forEach((e=>e(t)))}))})),this._connection.onreconnected((()=>this._reconnectSubscribers.forEach((e=>e())))),yield this._connection.start()})),this.subscribe=(e,t)=>{var s;return this._subscribers[e]=null!==(s=this._subscribers[e])&&void 0!==s?s:[],this._subscribers[e].push(t),()=>this._subscribers[e].filter((e=>e!==t))},this.subscribeReconnect=e=>(this._reconnectSubscribers.push(e),()=>this._reconnectSubscribers.filter((t=>t!==e))),this.accounts=()=>h(this,void 0,void 0,(function*(){const{data:e}=yield this.axios.get("account");return e})),this.chats=()=>h(this,void 0,void 0,(function*(){const{data:e}=yield this.axios.get("chat");return e})),this.chat=e=>h(this,void 0,void 0,(function*(){const{data:t}=yield this.axios.get(`chat/${e}`);return t})),this.addChat=e=>h(this,void 0,void 0,(function*(){const{data:t}=yield this.axios.post("chat",e);return t})),this.messages=e=>h(this,void 0,void 0,(function*(){const{chatId:t,skip:s=0,take:a=20}=e,n=encodeURIComponent(JSON.stringify({skip:s,take:a})),{data:i}=yield this.axios.get(`chat/${t}/message?pagingRule=${n}`);return i})),this.send=e=>h(this,void 0,void 0,(function*(){const{chatId:t}=e,s=function(e,t){var s={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(s[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(a=Object.getOwnPropertySymbols(e);n<a.length;n++)t.indexOf(a[n])<0&&Object.prototype.propertyIsEnumerable.call(e,a[n])&&(s[a[n]]=e[a[n]])}return s}(e,["chatId"]);yield this.axios.post(`chat/${t}/message`,s)})),this.read=e=>h(this,void 0,void 0,(function*(){yield this.axios.put("chat/message/read",e)})),this.removeMember=e=>h(this,void 0,void 0,(function*(){yield this.axios.delete(`chat/${e.chatId}/member`,{data:e})})),this.addMember=e=>h(this,void 0,void 0,(function*(){yield this.axios.post(`chat/${e.chatId}/member`,e)})),this._config=Object.assign(Object.assign({},e),{signalR:Object.assign(Object.assign({},m),e.signalR)})}get axios(){return this._config.axios}},exports.ChatifyContext=function({value:t,children:s}){return e.jsx(N.Provider,{value:t.client,children:e.jsx(w.Provider,{value:t.me,children:e.jsx(v,{children:e.jsx(M,{children:s})})})})},exports.Header=Qe,exports.ICONS=Ae,exports.Icon=Le,exports.LocalizerContext=K,exports.MessageAuthor=ve,exports.MessageBox=we,exports.MessageContent=Ce,exports.MessageInfoBox=qe,exports.MessageReadObserver=Ne,exports.MessageRow=Ie,exports.MessageText=Oe,exports.ReducerProvider=v,exports.SystemMessage=Z,exports.defaultLocalizer=W,exports.formatSystemMessage=Y,exports.useAccounts=P,exports.useAddChat=z,exports.useAddMember=D,exports.useChat=B,exports.useChatList=A,exports.useClient=k,exports.useDispatch=O,exports.useLoadMore=H,exports.useLocalizer=Q,exports.useMe=_,exports.useMessages=T,exports.useReadMonitor=U,exports.useReducer=f,exports.useRemoveMember=$,exports.useSelect=C,exports.useSignalRMonitor=I,exports.useStateRef=q;
-//# sourceMappingURL=index.js.map