@messenger-box/tailwind-ui-inbox 10.0.3-alpha.100

package/lib/container/ServiceInbox.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type ServiceInboxProps = {
+    role?: any;
+    pathPrefix?: string;
+};
+export declare const ServiceInboxComponent: React.MemoExoticComponent<(props: any) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<(props: ServiceInboxProps) => React.JSX.Element>;
+export default _default;
+//# sourceMappingURL=ServiceInbox.d.ts.map

package/lib/container/ServiceInbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServiceInbox.d.ts","sourceRoot":"","sources":["../../src/container/ServiceInbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqE,MAAM,OAAO,CAAC;AAW1F,KAAK,iBAAiB,GAAG;IAAE,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAO7D,eAAO,MAAM,qBAAqB,oCAAsB,GAAG,uBAuDzD,CAAC;0DAE0B,iBAAiB;AAkH9C,wBAAwC"}

package/lib/container/ServiceInbox.js

@@ -0,0 +1,144 @@
+import React__default,{useMemo,useCallback,useState,useEffect}from'react';import {useSupportServiceChannelsQuery}from'common/graphql';import {useParams,useLocation}from'@remix-run/react';import {useSelector,useDispatch}from'react-redux';import {userSelector}from'@adminide-stack/user-auth0-client';import {push}from'@common-stack/remix-router-redux';import'../components/inbox/FilesList.js';import'../components/inbox/MessageItem.js';import'../components/inbox/ThreadItem.js';import'date-fns';import'@react-icons/all-files/bs/BsFlag.js';import'../components/InboxMessage/ConversationItem.js';import'../components/InboxMessage/ServiceConversationItem.js';import'../components/InboxMessage/LeftSidebar.js';import'react-i18next';import {config}from'../config/env-config.js';import'@react-icons/all-files/bi/BiImage.js';import'@react-icons/all-files/ai/AiOutlineSecurityScan.js';import'@react-icons/all-files/fi/FiCheck.js';import'@react-icons/all-files/bs/BsFillStarFill.js';import'common';import'@common-stack/components-pro';import'react-markdown';import'remark-gfm';import'../enums/messenger-slot-fill-name-enum.js';import {ServiceInboxItem}from'../components/InboxMessage/ServiceInboxItem.js';import'../components/ModelConfigPanel.js';import'@messenger-box/core';import'../components/live-code-editor/hybrid-live-editor.js';import'../components/AIAgent/AIAgent.js';const {
+  MESSAGES_PER_PAGE,
+  WEB_INBOX_MESSEGE_PATH
+} = config;
+// Custom Skeleton component using Tailwind
+const SkeletonLoader = ({
+  height = 'h-10'
+}) => React__default.createElement("div", {
+  className: `${height} bg-gray-200 rounded animate-pulse`
+});
+const ServiceInboxComponent = React__default.memo(props => {
+  const auth = useSelector(userSelector);
+  useDispatch();
+  const path = useParams();
+  useLocation();
+  const {
+    id: channelId
+  } = path || {};
+  // const channels = React.useMemo(() => {
+  //     // if (!props?.serviceChannels?.length) return null;
+  //     let uChannels: any =
+  //         props?.serviceChannels?.filter((c: any) =>
+  //             c.members.some((u: any) => u.user.__typename == 'UserAccount'),
+  //         ) ?? [];
+  //     return uChannels || [];
+  // }, [props?.serviceChannels]);
+  const users = useMemo(() => {
+    return props?.serviceChannels?.reduce((acc, curr) => {
+      const newMembers = curr.members.filter(({
+        user
+      }) => acc.findIndex(({
+        id
+      }) => id === user.id));
+      return [...acc, ...newMembers?.map(({
+        user
+      }) => user)];
+    }, []) || [];
+  }, [props?.serviceChannels]);
+  useMemo(() => users?.find(({
+    alias
+  }) => alias.includes(auth?.authUserId)), [users, auth]);
+  const handleSelectChannel = useCallback((channelId, postId) => {
+    if (props?.handleSelectChannel) {
+      props?.handleSelectChannel(channelId, postId);
+    }
+    props?.setChannelId(channelId);
+    props?.setPostId(postId);
+    props?.setSkip(0);
+    props?.clearMessages();
+  }, []);
+  return React__default.createElement("div", {
+    className: "w-full"
+  }, props?.serviceChannels?.map((channel, index) => React__default.createElement(ServiceInboxItem, {
+    key: `service_channel_${channel.id}`,
+    filter: props?.keyword,
+    channel: channel,
+    currentUser: auth,
+    handleSelectChannel: handleSelectChannel,
+    users: users,
+    selectedChannelId: props?.channelId ?? channelId,
+    showBorder: props?.serviceChannels.length == 1 ? true : index != props?.serviceChannels.length - 1,
+    role: props?.role ?? null
+  })));
+});
+const ServiceInbox = props => {
+  const path = useParams();
+  const location = useLocation();
+  const {
+    id: channelId
+  } = path || {};
+  useSelector(userSelector);
+  const dispatch = useDispatch();
+  const [keyword, setKeyword] = useState('');
+  // const [channels, setChannels] = useState<any>([]);
+  const {
+    data: serviceChannels,
+    loading: serviceChannelsLoading,
+    refetch: getServiceChannelsRefetch
+  } = useSupportServiceChannelsQuery({
+    variables: {
+      criteria: {
+        type: 'SERVICE'
+      }
+    },
+    fetchPolicy: 'cache-and-network',
+    onCompleted: data => {
+      //setRefresh(false);
+    }
+  });
+  useEffect(() => {
+    getServiceChannelsRefetch({
+      criteria: {
+        type: 'SERVICE'
+      }
+    });
+  }, [location?.pathname]);
+  // useEffect(() => {
+  //     if (serviceChannels?.supportServiceChannels?.length > 0) {
+  //         let uChannels: any =
+  //             serviceChannels?.supportServiceChannels?.filter((c: any) =>
+  //                 c.members.some((u: any) => u.user.__typename == 'UserAccount'),
+  //             ) ?? [];
+  //         const sChannels: any = uChannels || [];
+  //         setChannels(sChannels);
+  //     }
+  // }, [serviceChannels]);
+  //..........................old code .....................................//
+  // const channels = React.useMemo(() => {
+  //     if (!serviceChannels?.supportServiceChannels?.length) return null;
+  //     let uChannels: any =
+  //         serviceChannels?.supportServiceChannels?.filter((c: any) =>
+  //             c.members.some((u: any) => u.user.__typename == 'UserAccount'),
+  //         ) ?? [];
+  //     return uChannels || [];
+  // }, [serviceChannels]);
+  // const users = useMemo(() => {
+  //     return (
+  //         channels?.reduce((acc, curr) => {
+  //             const newMembers = curr.members.filter(({ user }) => acc.findIndex(({ id }) => id === user.id));
+  //             return [...acc, ...newMembers?.map(({ user }) => user)];
+  //         }, []) || []
+  //     );
+  // }, [channels]);
+  // const currentUser = useMemo(() => users?.find(({ alias }) => alias.includes(auth?.authUserId)), [users, auth]);
+  const handleSelectChannel = useCallback((channelId, postId) => {
+    if (postId || postId == 0) dispatch(push(`${props?.pathPrefix ? props?.pathPrefix : ''}/${WEB_INBOX_MESSEGE_PATH}/${channelId}/${postId}`));else dispatch(push(`${props?.pathPrefix ? props?.pathPrefix : ''}/${WEB_INBOX_MESSEGE_PATH}/${channelId}`));
+  }, [location, path]);
+  //..........................old code .....................................//
+  if (serviceChannelsLoading) {
+    return React__default.createElement("div", {
+      className: "flex flex-col space-y-4"
+    }, Array(10).fill(1).map((x, y) => React__default.createElement(SkeletonLoader, {
+      key: y
+    })));
+  }
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ServiceInboxComponent, {
+    serviceChannels: serviceChannels?.supportServiceChannels,
+    filter: keyword,
+    channelId: channelId,
+    handleSelectChannel: handleSelectChannel,
+    ...props
+  }));
+};
+var ServiceInbox$1 = React__default.memo(ServiceInbox);export{ServiceInboxComponent,ServiceInbox$1 as default};//# sourceMappingURL=ServiceInbox.js.map

package/lib/container/ServiceInbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServiceInbox.js","sources":["../../src/container/ServiceInbox.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"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"}

package/lib/container/ThreadMessages.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ThreadMessagesProps {
+    channelId: any;
+    postParentId: any;
+    isPostParentIdThread?: any;
+    role: string;
+    goBack?: boolean;
+    pathPrefix?: string;
+    setPostId?: (id: any) => void;
+}
+declare const _default: React.MemoExoticComponent<({ channelId, postParentId, role, isPostParentIdThread, goBack, pathPrefix, setPostId, }: ThreadMessagesProps) => React.JSX.Element>;
+export default _default;
+//# sourceMappingURL=ThreadMessages.d.ts.map

package/lib/container/ThreadMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadMessages.d.ts","sourceRoot":"","sources":["../../src/container/ThreadMessages.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAqBtE,UAAU,mBAAmB;IACzB,SAAS,EAAE,GAAG,CAAC;IACf,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,GAAG,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC;4IAeE,mBAAmB;AAsUtB,wBAA0C"}

package/lib/container/ThreadMessages.js

@@ -0,0 +1,314 @@
+import React__default,{useState,useRef,useMemo,useCallback}from'react';import'../components/inbox/FilesList.js';import'../components/inbox/MessageItem.js';import'../components/inbox/ThreadItem.js';import'date-fns';import'@react-icons/all-files/bs/BsFlag.js';import'../components/InboxMessage/ConversationItem.js';import'../components/InboxMessage/ServiceConversationItem.js';import'../components/InboxMessage/LeftSidebar.js';import {MessageInput}from'../components/InboxMessage/MessageInput.js';import {Messages}from'../components/InboxMessage/Messages.js';import'react-i18next';import'@react-icons/all-files/bi/BiImage.js';import'@react-icons/all-files/ai/AiOutlineSecurityScan.js';import'@react-icons/all-files/fi/FiCheck.js';import'@react-icons/all-files/bs/BsFillStarFill.js';import'common';import'@common-stack/components-pro';import'react-markdown';import'remark-gfm';import'../enums/messenger-slot-fill-name-enum.js';import'../components/InboxMessage/ServiceInboxItem.js';import {config}from'../config/env-config.js';import'../components/ModelConfigPanel.js';import {objectId}from'@messenger-box/core';import'../components/live-code-editor/hybrid-live-editor.js';import {useViewChannelDetailQuery,useCreatePostThreadMutation,useGetPostThreadLazyQuery,OnThreadChatMessageAddedDocument}from'common/graphql';import'../components/AIAgent/AIAgent.js';import {BiChevronLeftSquare}from'@react-icons/all-files/bi/BiChevronLeftSquare.js';import {useUploadFiles}from'@messenger-box/platform-client';import {uniqBy,orderBy}from'lodash-es';import {useSelector,useDispatch}from'react-redux';import {userSelector}from'@adminide-stack/user-auth0-client';import {useNavigate}from'@remix-run/react';const {
+  MESSAGES_PER_PAGE,
+  WEB_INBOX_MESSEGE_PATH
+} = config;
+// Custom Skeleton component using Tailwind
+const Skeleton = ({
+  height = '40px'
+}) => React__default.createElement("div", {
+  className: "animate-pulse bg-gray-200 rounded",
+  style: {
+    height
+  }
+});
+const ThreadMessages = ({
+  channelId,
+  postParentId,
+  role,
+  isPostParentIdThread,
+  goBack = false,
+  pathPrefix,
+  setPostId
+}) => {
+  const navigate = useNavigate();
+  const currentUser = useSelector(userSelector);
+  const [parentId, setParentId] = React__default.useState(postParentId);
+  const [channelMessages, setChannelMessages] = React__default.useState([]);
+  const [totalCount, setTotalCount] = React__default.useState(0);
+  const [loadingOldMessages, setLoadingOldMessages] = React__default.useState(false);
+  const [loading, setLoading] = React__default.useState(true);
+  useDispatch();
+  const threadMessageRootRef = React__default.useRef(null);
+  const threadMessageListRef = React__default.useRef(null);
+  const [postThread, setPostThread] = useState();
+  const messageListRef = useRef(null);
+  const [channelToTop, setChannelToTop] = React__default.useState(0);
+  const [isScrollToBottom, setIsScrollToBottom] = useState(false);
+  const {
+    startUpload
+  } = useUploadFiles();
+  const {
+    refetch: refetchChannel
+  } = useViewChannelDetailQuery({
+    variables: {
+      id: channelId?.toString()
+    }
+  });
+  const [sendThreadMessage] = useCreatePostThreadMutation();
+  const [getThreadMessages, {
+    data,
+    loading: threadLoading,
+    fetchMore: fetchMoreMessages,
+    refetch: refetchThreadMessages,
+    subscribeToMore
+  }] = useGetPostThreadLazyQuery({
+    fetchPolicy: 'cache-and-network'
+  });
+  const [selectedPost, setSelectedPost] = useState(null);
+  const onMessageClick = msg => {
+    setSelectedPost(msg);
+  };
+  React__default.useEffect(() => {
+    refetchChannel({
+      id: channelId?.toString()
+    });
+    if (postParentId) {
+      refetchThreadMessages({
+        channelId: channelId?.toString(),
+        role: role?.toString(),
+        postParentId: postParentId?.toString(),
+        selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+        limit: MESSAGES_PER_PAGE
+      });
+    }
+    setParentId(postParentId);
+  }, [postParentId]);
+  React__default.useEffect(() => {
+    // if (parentId && parentId == 0) {
+    setLoading(false);
+    if (channelId && parentId) {
+      getThreadMessages({
+        variables: {
+          channelId: channelId?.toString(),
+          role: role?.toString(),
+          postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+          selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+          limit: MESSAGES_PER_PAGE
+        }
+      });
+    }
+  }, [channelId, parentId]);
+  React__default.useEffect(() => {
+    if (data?.getPostThread) {
+      const threads = data.getPostThread;
+      const threadPost = threads?.post ?? [];
+      const threadReplies = threads?.replies ?? [];
+      const messeageTotalCount = threads?.replyCount ?? 0;
+      const messages = [threadPost, ...threadReplies];
+      if (messages && messages.length > 0 && messeageTotalCount > totalCount || messages && messages.length > 0 && channelMessages.length === 0) {
+        setThreadMessages(messages, messeageTotalCount);
+      }
+    }
+    if (isScrollToBottom && channelMessages) scrollToBottom();
+  }, [data, channelMessages, loadingOldMessages, totalCount, isPostParentIdThread, isScrollToBottom]);
+  const setThreadMessages = (messages, messagesTotalCount) => {
+    setChannelMessages(oldMessages => uniqBy([...messages, ...oldMessages], ({
+      id
+    }) => id));
+    setTotalCount(messagesTotalCount);
+  };
+  const sortedMessages = useMemo(() => channelMessages && orderBy(channelMessages, ['createdAt'], ['asc']), [channelMessages]);
+  const scrollToBottom = React__default.useCallback(() => {
+    if (threadMessageListRef?.current) {
+      setIsScrollToBottom(false);
+      threadMessageListRef.current.scrollTop = threadMessageListRef.current.scrollHeight;
+    }
+  }, [threadMessageListRef]);
+  const handleSend = useCallback(async (message, files) => {
+    if (!(message && channelId)) {
+      return;
+    }
+    const postId = objectId();
+    if (files && files?.length > 0) {
+      const uploadResponse = await startUpload({
+        file: files,
+        saveUploadedFile: {
+          variables: {
+            postId
+          }
+        },
+        createUploadLink: {
+          variables: {
+            postId
+          }
+        }
+      });
+      if (uploadResponse?.error) setLoading(false);
+      const uploadedFiles = uploadResponse.data;
+      if (uploadResponse.data) {
+        const files = uploadedFiles?.map(f => f.id) ?? null;
+        await sendThreadMessage({
+          variables: {
+            postId,
+            channelId,
+            postThreadId: postThread && postThread?.id,
+            postParentId: !parentId || parentId == 0 ? null : parentId,
+            threadMessageInput: {
+              content: message,
+              files,
+              role
+            }
+          },
+          update: (cache, {
+            data,
+            errors
+          }) => {
+            if (!data || errors) {
+              setLoading(false);
+              return;
+            }
+            data?.createPostThread?.lastMessage;
+            setPostThread(data?.createPostThread?.data);
+            if (!parentId || parentId == 0) {
+              setParentId(data?.createPostThread?.lastMessage?.id);
+              setPostId(data?.createPostThread?.lastMessage?.id);
+              // dispatch(
+              //     push(
+              //         `${pathPrefix ? pathPrefix : ''}/${WEB_INBOX_MESSEGE_PATH}/${channelId}/${
+              //             data?.createPostThread?.lastMessage?.id
+              //         }`,
+              //     ),
+              // );
+            }
+            setChannelToTop(channelToTop + 1);
+            setLoading(false);
+            // scrollToBottom();
+          }
+        });
+      }
+    } else {
+      await sendThreadMessage({
+        variables: {
+          channelId,
+          postParentId: !parentId || parentId == 0 ? null : parentId,
+          postThreadId: postThread && postThread?.id,
+          threadMessageInput: {
+            content: message,
+            role
+          }
+        },
+        update: (cache, {
+          data,
+          errors
+        }) => {
+          if (!data || errors) {
+            return;
+          }
+          setPostThread(data?.createPostThread.data);
+          if (!parentId || parentId == 0) {
+            setParentId(data?.createPostThread?.lastMessage?.id);
+            setPostId(data?.createPostThread?.lastMessage?.id);
+            // dispatch(
+            //     push(
+            //         `${pathPrefix ? pathPrefix : ''}/${WEB_INBOX_MESSEGE_PATH}/${channelId}/${
+            //             data?.createPostThread?.lastMessage?.id
+            //         }`,
+            //     ),
+            // );
+          }
+          setChannelToTop(channelToTop + 1);
+          //scrollToBottom();
+        }
+      });
+    }
+  }, [setChannelMessages, channelId, parentId, channelToTop, postThread]);
+  const onFetchOld = useCallback(async skip => {
+    if (channelId && parentId) {
+      setLoadingOldMessages(true);
+      fetchMoreMessages({
+        variables: {
+          channelId: channelId?.toString(),
+          role: role?.toString(),
+          postParentId: parentId?.toString(),
+          selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+          limit: MESSAGES_PER_PAGE,
+          skip: skip - 1
+        }
+      }).then(res => {
+        if (res?.data?.getPostThread) {
+          const threads = res?.data?.getPostThread;
+          const threadReplies = threads?.replies ?? [];
+          const messeageTotalCount = threads?.replyCount ?? 0;
+          setThreadMessages(threadReplies, messeageTotalCount);
+          if (threadMessageRootRef?.current) {
+            threadMessageRootRef.current.scrollTop = threadMessageRootRef.current.scrollTop + threadMessageRootRef.current.clientHeight / 2;
+          }
+        }
+      }).finally(() => {
+        setLoadingOldMessages(false);
+      }).catch(error => {
+        setLoadingOldMessages(false);
+      });
+    }
+  }, [parentId, channelId, threadMessageRootRef, channelMessages]);
+  const onMessagesScroll = useCallback(async e => {
+    if (threadMessageRootRef.current) {
+      const {
+        clientHeight: messageContainerClientHeight,
+        scrollHeight: messageContainerScrollHeight,
+        scrollTop: messageContainerScrollTop,
+        offsetTop: messageContainerOffsetTop
+      } = threadMessageRootRef?.current;
+      if (messageContainerClientHeight - messageContainerScrollTop == messageContainerScrollHeight && !loadingOldMessages && totalCount > channelMessages.length) {
+        await onFetchOld(channelMessages?.length);
+      }
+    }
+  }, [threadMessageRootRef, loadingOldMessages, channelMessages, totalCount]);
+  useCallback(() => {
+    if (channelId) navigate(`${pathPrefix ? pathPrefix : ''}/${WEB_INBOX_MESSEGE_PATH}/${channelId}/1`);
+  }, [channelId]);
+  if ((loading || loadingOldMessages) && !parentId) {
+    return React__default.createElement("div", {
+      className: "flex flex-col space-y-4"
+    }, Array(10).fill(1).map((x, y) => React__default.createElement(Skeleton, {
+      height: "40px",
+      key: y
+    })));
+  }
+  return React__default.createElement(React__default.Fragment, null, goBack && React__default.createElement("button", {
+    className: "absolute z-10 m-1.5 w-10 bg-transparent text-gray-400 hover:text-gray-300 focus:outline-none focus:ring-0 transition-colors duration-200",
+    onClick: () => navigate(-1)
+  }, React__default.createElement(BiChevronLeftSquare, {
+    className: "text-3xl"
+  })), React__default.createElement("div", {
+    ref: threadMessageRootRef,
+    className: "flex flex-col-reverse overflow-y-auto flex-grow flex-shrink p-4 px-2.5 md:px-12 lg:px-20",
+    onScroll: onMessagesScroll
+  }, React__default.createElement(Messages, {
+    innerRef: messageListRef,
+    channelId: channelId,
+    currentUser: currentUser,
+    channelMessages: sortedMessages,
+    totalCount: totalCount,
+    onMessageClick: onMessageClick,
+    subscribeToNewMessages: () => subscribeToMore({
+      document: OnThreadChatMessageAddedDocument,
+      variables: {
+        channelId: channelId?.toString(),
+        postParentId: !parentId || parentId == 0 ? null : parentId?.toString()
+      },
+      updateQuery: (prev, {
+        subscriptionData
+      }) => {
+        if (!subscriptionData.data) return prev;
+        const newMessage = subscriptionData?.data?.threadChatMessageAdded;
+        const prevReplyCount = prev?.getPostThread?.replyCount;
+        const newReplyCount = prevReplyCount + 1;
+        return Object.assign({}, prev, {
+          getPostThread: {
+            ...prev?.getPostThread,
+            lastReplyAt: newMessage.createdAt,
+            replies: [newMessage, ...prev?.getPostThread?.replies],
+            replyCount: newReplyCount,
+            updatedAt: newMessage.createdAt
+          }
+        });
+      }
+    })
+  })), React__default.createElement(MessageInput, {
+    channelId: channelId,
+    handleSend: handleSend,
+    placeholder: "Message"
+  }));
+};
+var ThreadMessages$1 = React__default.memo(ThreadMessages);export{ThreadMessages$1 as default};//# sourceMappingURL=ThreadMessages.js.map

package/lib/container/ThreadMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadMessages.js","sources":["../../src/container/ThreadMessages.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"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"}

package/lib/container/ThreadMessagesInbox.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ThreadMessageInboxProps {
+    channelId: any;
+    postId?: any;
+    role?: string;
+    isPostParentIdThread?: boolean;
+    goBack?: boolean;
+    pathPrefix?: string;
+    setChannelId?: (channelId: any) => void;
+    setPostId?: (postId?: any) => void;
+    onMessageClick: (reservationId: any) => void;
+}
+export declare const ThreadMessagesInbox: React.MemoExoticComponent<(props: ThreadMessageInboxProps) => React.JSX.Element>;
+//# sourceMappingURL=ThreadMessagesInbox.d.ts.map

package/lib/container/ThreadMessagesInbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadMessagesInbox.d.ts","sourceRoot":"","sources":["../../src/container/ThreadMessagesInbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAkB5F,MAAM,WAAW,uBAAuB;IACpC,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,aAAa,KAAA,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,mBAAmB,oCAAsB,uBAAuB,uBAma3E,CAAC"}