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

package/lib/components/InboxMessage/MessageInput.js

@@ -0,0 +1,154 @@
+import React__default,{useState,useRef,useEffect,useCallback,useMemo}from'react';import {useTranslation}from'react-i18next';import {config}from'../../config/env-config.js';import {UploadImageButton}from'./UploadImageButton.js';import {FilesList}from'../inbox/FilesList.js';import'../inbox/MessageItem.js';import'../inbox/ThreadItem.js';const MessageInput = ({
+  handleSend: handleSendProp,
+  placeholder
+}) => {
+  const [message, setMessage] = useState('');
+  const [sending, setSending] = useState(false);
+  const [files, setFiles] = useState([]);
+  const [showToast, setShowToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+  const textareaRef = useRef(null);
+  const {
+    t
+  } = useTranslation('translations');
+  // Auto-focus the textarea when component mounts
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, []);
+  const showToastMessage = useCallback(message => {
+    setToastMessage(message);
+    setShowToast(true);
+    setTimeout(() => setShowToast(false), 3000);
+  }, []);
+  const handleSend = useCallback(() => {
+    if (!message.trim() && files.length === 0) return;
+    setSending(true);
+    handleSendProp(message, files).then(() => {
+      setMessage('');
+      setFiles([]);
+      // Auto-focus the textarea after sending a message
+      setTimeout(() => {
+        if (textareaRef.current) {
+          textareaRef.current.focus();
+        }
+      }, 100);
+    }).finally(() => setSending(false));
+  }, [files, handleSendProp, message]);
+  const handleKeyDown = useCallback(e => {
+    const keyCode = e.which || e.keyCode;
+    if (keyCode == 13 && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }, [handleSend]);
+  const inputHeight = useMemo(() => {
+    const lines = message.split('\n').length;
+    return Math.max(40, Math.min(120, 40 + (lines - 1) * 20));
+  }, [message]);
+  const onUploadImageChange = useCallback(({
+    target
+  }) => {
+    let fileList = [];
+    let index = 0;
+    if (files.length + target.files.length > config.FILES_PER_MESSAGE) {
+      showToastMessage(t('tailwind_ui_inbox.you_can_not_upload_more_than_files', {
+        files_per_message: config.FILES_PER_MESSAGE
+      }));
+      return;
+    }
+    while (target.files[index]) {
+      fileList.push(target.files[index]);
+      index += 1;
+    }
+    setFiles(oldFiles => [...oldFiles, ...fileList]);
+  }, [setFiles, files, showToastMessage, t]);
+  const canSend = message.trim() || files.length > 0;
+  return React__default.createElement("div", {
+    className: "border-t border-gray-200 bg-white"
+  }, showToast && React__default.createElement("div", {
+    className: "fixed top-4 right-4 z-50 bg-orange-50 border border-orange-200 text-orange-800 px-4 py-3 rounded-lg shadow-lg animate-bounce"
+  }, React__default.createElement("div", {
+    className: "flex items-center"
+  }, React__default.createElement("svg", {
+    className: "w-5 h-5 mr-2",
+    fill: "currentColor",
+    viewBox: "0 0 20 20"
+  }, React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+    clipRule: "evenodd"
+  })), toastMessage)), files?.length > 0 && !sending && React__default.createElement("div", {
+    className: "px-4 py-3 border-b border-gray-100 animate-fade-in"
+  }, React__default.createElement(FilesList, {
+    files: files
+  })), React__default.createElement("div", {
+    className: "p-4"
+  }, React__default.createElement("div", {
+    className: `relative bg-white border rounded-lg transition-all duration-200 ease-in-out ${isFocused ? 'ring-2 ring-blue-500 ring-opacity-50 border-blue-300 shadow-sm' : 'border-gray-300 hover:border-gray-400'}`
+  }, React__default.createElement("div", {
+    className: "flex items-end gap-2 p-2"
+  }, React__default.createElement("div", {
+    className: "flex-shrink-0 self-end pb-1"
+  }, React__default.createElement(UploadImageButton, {
+    onChange: onUploadImageChange
+  })), React__default.createElement("div", {
+    className: "flex-grow min-w-0"
+  }, React__default.createElement("textarea", {
+    ref: textareaRef,
+    className: "w-full text-base px-3 py-2 bg-transparent border-none resize-none overflow-hidden placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent",
+    style: {
+      height: `${inputHeight}px`,
+      minHeight: '40px',
+      maxHeight: '120px'
+    },
+    placeholder: placeholder || t('tailwind_ui_inbox.reminder_leave_a_review'),
+    value: sending ? '' : message,
+    onKeyDown: handleKeyDown,
+    onChange: e => setMessage(e.target.value),
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    disabled: sending,
+    rows: 1
+  })), React__default.createElement("div", {
+    className: "flex-shrink-0 self-end pb-1"
+  }, React__default.createElement("button", {
+    className: `w-8 h-8 rounded-md flex items-center justify-center transition-all duration-200 ease-in-out ${canSend && !sending ? 'bg-green-600 hover:bg-green-700 text-white shadow-sm hover:shadow-md' : 'bg-gray-200 text-gray-400 cursor-not-allowed'}`,
+    onClick: handleSend,
+    disabled: !canSend || sending,
+    type: "button"
+  }, sending ? React__default.createElement("svg", {
+    className: "w-4 h-4 animate-spin",
+    fill: "none",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("circle", {
+    className: "opacity-25",
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    strokeWidth: "4"
+  }), React__default.createElement("path", {
+    className: "opacity-75",
+    fill: "currentColor",
+    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  })) : React__default.createElement("svg", {
+    className: "w-4 h-4",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+  })))))), React__default.createElement("div", {
+    className: "flex items-center justify-between mt-2 px-1"
+  }, React__default.createElement("span", {
+    className: "text-xs text-gray-400"
+  }, "Press Enter to send, Shift+Enter for new line"), message.length > 0 && React__default.createElement("span", {
+    className: "text-xs text-gray-400 transition-opacity duration-200 ease-in-out"
+  }, message.length, " characters"))));
+};export{MessageInput};//# sourceMappingURL=MessageInput.js.map

package/lib/components/InboxMessage/MessageInput.js.map

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

package/lib/components/InboxMessage/MessageInputComponent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type MessageInputProps = {
+    channelId?: string;
+    handleSend: (message: string, files: File[]) => Promise<void>;
+    placeholder?: string;
+};
+export declare const MessageInputComponent: ({ handleSend: handleSendProp, placeholder }: MessageInputProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=MessageInputComponent.d.ts.map

package/lib/components/InboxMessage/MessageInputComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInputComponent.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/MessageInputComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAMjF,KAAK,iBAAiB,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,6CAA6C,iBAAiB,sBAwOnG,CAAC"}

package/lib/components/InboxMessage/Messages.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface MessagesProps {
+    channelId: number;
+    currentUser: any;
+    channelMessages: any[];
+    totalCount: number;
+    innerRef?: any;
+    refetchMessages?: () => void;
+    subscribeToNewMessages?: () => any;
+    subscribeToNewServiceMessages?: () => any;
+    onMessageClick: (msg: any) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+}
+export declare const Messages: ({ currentUser, channelMessages, refetchMessages, innerRef, channelId, subscribeToNewMessages, subscribeToNewServiceMessages, onMessageClick, isDesktopView, isSmallScreen, }: MessagesProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=Messages.d.ts.map

package/lib/components/InboxMessage/Messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Messages.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/Messages.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAKpE,UAAU,aAAa;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,GAAG,CAAC;IACjB,eAAe,EAAE,GAAG,EAAE,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,GAAG,CAAC;IACnC,6BAA6B,CAAC,EAAE,MAAM,GAAG,CAAC;IAC1C,cAAc,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,GAAI,8KAWtB,aAAa,sBAyGf,CAAC"}

package/lib/components/InboxMessage/Messages.js

@@ -0,0 +1,99 @@
+import {isToday,isYesterday,format}from'date-fns';import React__default,{useEffect,useRef,useMemo}from'react';import {useTranslation}from'react-i18next';import {SlackLikeMessageGroup}from'./message-widgets/SlackLikeMessageGroup.js';const Messages = ({
+  currentUser,
+  channelMessages,
+  refetchMessages,
+  innerRef,
+  channelId,
+  subscribeToNewMessages,
+  subscribeToNewServiceMessages,
+  onMessageClick,
+  isDesktopView = false,
+  isSmallScreen = false
+}) => {
+  const {
+    t
+  } = useTranslation('translations');
+  // Disable user modal behavior: no-op handler
+  const onOpen = () => {};
+  useEffect(() => {
+    subscribeToNewMessages?.();
+    subscribeToNewServiceMessages?.();
+  }, [channelId]);
+  useRef(null);
+  React__default.useCallback(() => {
+    if (innerRef.current) innerRef.current?.querySelector(':scope > :last-child')?.scrollIntoView({
+      behavior: 'smooth',
+      inline: 'start'
+    });
+  }, [innerRef]);
+  React__default.useEffect(() => {
+    if (channelMessages?.length) ;
+  }, [channelMessages]);
+  const messageListWithDates = useMemo(() => {
+    let currentDate = '';
+    let res = [];
+    channelMessages?.map(msg => {
+      const date = new Date(msg.createdAt);
+      let msgDate;
+      if (isToday(date)) msgDate = t('tailwind_ui_inbox.today');else if (isYesterday(date)) msgDate = t('tailwind_ui_inbox.yesterday');else msgDate = format(new Date(msg.createdAt), 'eee, do MMMM');
+      if (msgDate !== currentDate) {
+        res.push({
+          type: 'date',
+          content: msgDate
+        });
+        currentDate = msgDate;
+      }
+      res.push(msg);
+    });
+    return res;
+  }, [channelMessages]);
+  // Group messages by date sections for Slack-like rendering
+  const messagesByDate = useMemo(() => {
+    const sections = [];
+    let currentSection = {
+      date: null,
+      messages: []
+    };
+    messageListWithDates.forEach(item => {
+      if (item?.type === 'date') {
+        if (currentSection.messages.length > 0) {
+          sections.push(currentSection);
+        }
+        currentSection = {
+          date: item.content,
+          messages: []
+        };
+      } else {
+        currentSection.messages.push(item);
+      }
+    });
+    if (currentSection.messages.length > 0) {
+      sections.push(currentSection);
+    }
+    return sections;
+  }, [messageListWithDates]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: `w-full pb-8 pt-4 ${isDesktopView ? 'space-y-8 max-w-full mx-auto' : isSmallScreen ? 'space-y-4' : 'space-y-6'}`,
+    ref: innerRef
+  }, messagesByDate?.map((section, sectionIndex) => React__default.createElement("div", {
+    key: `section-${sectionIndex}`,
+    className: "w-full"
+  }, section.date && React__default.createElement("div", {
+    className: "flex items-center justify-center my-6"
+  }, React__default.createElement("div", {
+    className: "flex-grow border-t border-gray-200"
+  }), React__default.createElement("div", {
+    className: "mx-4 px-3 py-1 bg-white border border-gray-200 rounded-full text-xs font-medium text-gray-600"
+  }, section.date), React__default.createElement("div", {
+    className: "flex-grow border-t border-gray-200"
+  })), React__default.createElement("div", {
+    className: `${isDesktopView ? 'mb-6' : 'mb-4'}`
+  }, React__default.createElement(SlackLikeMessageGroup, {
+    messages: section.messages,
+    currentUser: currentUser,
+    onOpen: onOpen,
+    onMessageClick: onMessageClick,
+    isDesktopView: isDesktopView,
+    isSmallScreen: isSmallScreen
+  }))))));
+};export{Messages};//# sourceMappingURL=Messages.js.map

package/lib/components/InboxMessage/Messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Messages.js","sources":["../../../src/components/InboxMessage/Messages.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"wOAoBO,MAAM,QAAQ,GAAG,CAAC;aAYZ;iBAET;AACA,EAAA,eAAY;UAEZ;WACI;wBACA;AACJ,EAAA,6BAAgB;AAEhB,EAAA;AACA,EAAA;eACQ,GAAA;;AAEI,EAAA,MAAA;AACA,IAAA;AACH,GAAA,GAAA,cAAE,CAAA,cAAA,CAAA;AACX;AAEA,EAAA,MAAA,MAAM,GAAA,MAAa,CAAA,CAAE;AACjB,EAAA,SAAA,CAAI,MAAA;0BACA,IAAA;iCACH,IAAA;AACL,EAAA,CAAA,EAAC,CAAA,SAAG,CAAA,CAAA;AAEJ,EAAM,MAAoB,CAAA,IAAG;EACVA,cAAM,CAAA,WAAA,CAAA,MAAA;QACrB,QAAO,CAAA,OAAM,EAAA,QAAA,CAAA,OAAA,EAAA,aAAA,CAAA,sBAAA,CAAA,EAAA,cAAA,CAAA;AACb,MAAA,QAAA,EAAA;YACI,EAAA;AACA,KAAA,CAAA;cACA,CAAA;AAAmB,EAAAA,cAAA,CAAA,SAAA,CAAA,MAAO;uBACjB,EAAA,MAAA,EAAY;AAChB,EAAA,CAAA,EAAA,CAAA,eAAA,CAAA,CAAO;AAEZ,EAAA,MAAA,oBAAgB,GAAA,OAAA,CAAW,MAAG;AAC1B,IAAA,IAAA,WAAG,GAAC,EAAI;gBACR;mBACH,EAAA,GAAA,CAAA,GAAA,IAAA;AACD,MAAA,MAAA,IAAI,GAAA,IAAK,IAAK,CAAA,GAAA,CAAA,SAAA,CAAA;AAClB,MAAA,IAAE,OAAC;AACH,MAAA,IAAA,QAAU,IAAC,CAAA,EAAA,OAAA,GAAA,CAAA,CAAA,yBAAA,CAAA,CAAA,KAAA,IAAA,WAAA,CAAA,IAAA,CAAA,EAAA,OAAA,GAAA,CAAA,CAAA,6BAAA,CAAA,CAAA,KAAA,OAAA,GAAA,MAAA,CAAA,IAAA,IAAA,CAAA,GAAA,CAAA,SAAA,CAAA,EAAA,cAAA,CAAA;AACf,MAAC,IAAG,OAAA,KAAA,WAAkB,EAAA;QAEtB,GAAA,CAAA,IAAA,CAAA;AACA,UAAM,IAAA,EAAA,MAAA;UACF,OAAM,EAAA;SACN,CAAA;AAEA,QAAA,WAAA,GAAA,OAAqB;AACjB,MAAA;kBACI,CAAA;AACI,IAAA,CAAA,CAAA;;AAEJ,EAAA,CAAA,EAAA,CAAA,eAAA,CAAA,CAAA;;sBACI,GAAA,OAAA,CAAA,MAAA;AACJ,IAAA,MAAA,QAAA,GAAA,EAAA;sBACH,GAAA;AACL,MAAA,IAAE,EAAC,IAAA;cAEC,EAAA;AACA,KAAA;wBACH,CAAA,OAAA,CAAA,IAAA,IAAA;AAED,MAAA,IAAA,IAAA,WAAgB,MAAA,EAAA;AACpB,QAAI,IAAA,cAAA,CAAA,QAAuB,CAAA,MAAA,GAAA,CAAA,EAAA;AAE3B,UAAA,QACI,CAAA,IAAA,CAAA,cAAA,CAAA;QACI;AASa,QAAA,cAAQ,GAAI;gBAEL,IAAA,CAAA,OAAA;AACA,UAAA,QAAA,EAAA;AAGA,SAAA;AAKR,MAAA,CAAA,MAAA;AACI,QAAA,cAAA,CAAA,QAAA,CAAA,IAAC,CAAA,IAAA,CAAA;AAc7B,MAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/InboxMessage/MessagesBuilderUi.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface MessagesProps {
+    channelId: number;
+    currentUser: any;
+    channelMessages: any[];
+    totalCount: number;
+    innerRef?: any;
+    refetchMessages?: () => void;
+    subscribeToNewMessages?: () => any;
+    subscribeToNewServiceMessages?: () => any;
+    onMessageClick: (msg: any) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+}
+export declare const MessagesBuilderUi: ({ currentUser, channelMessages, refetchMessages, innerRef, channelId, subscribeToNewMessages, subscribeToNewServiceMessages, onMessageClick, isDesktopView, isSmallScreen, }: MessagesProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=MessagesBuilderUi.d.ts.map

package/lib/components/InboxMessage/MessagesBuilderUi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagesBuilderUi.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/MessagesBuilderUi.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAMpE,UAAU,aAAa;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,GAAG,CAAC;IACjB,eAAe,EAAE,GAAG,EAAE,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,GAAG,CAAC;IACnC,6BAA6B,CAAC,EAAE,MAAM,GAAG,CAAC;IAC1C,cAAc,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,8KAW/B,aAAa,sBAiIf,CAAC"}

package/lib/components/InboxMessage/Popover.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const Popover: () => React.JSX.Element;
+//# sourceMappingURL=Popover.d.ts.map

package/lib/components/InboxMessage/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,OAAO,yBAsCnB,CAAC"}

package/lib/components/InboxMessage/Popover.js

@@ -0,0 +1,31 @@
+import React__default from'react';import {useTranslation}from'react-i18next';const Popover = () => {
+  const {
+    t
+  } = useTranslation('translations');
+  const content = [{
+    name: t('tailwind_ui_inbox.all_conversations')
+  }, {
+    name: t('tailwind_ui_inbox.archived_conversations'),
+    total: '0'
+  }, {
+    name: t('tailwind_ui_inbox.unread_conversations'),
+    total: '0'
+  }];
+  return React__default.createElement("div", null, content?.map((item, index) => {
+    if (!item.total) {
+      return React__default.createElement("div", {
+        className: "popover-style hover:bg-gray-200",
+        key: index
+      }, React__default.createElement("button", {
+        className: "border-none text-base text-gray-800 bg-transparent h-7 p-0 cursor-pointer hover:underline"
+      }, item.name));
+    } else {
+      return React__default.createElement("div", {
+        className: "popover-style hover:bg-gray-200",
+        key: index
+      }, React__default.createElement("button", {
+        className: "border-none text-base text-gray-800 bg-transparent h-7 p-0 cursor-pointer hover:underline"
+      }, item.name + `(${item.total})`));
+    }
+  }));
+};export{Popover};//# sourceMappingURL=Popover.js.map

package/lib/components/InboxMessage/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../src/components/InboxMessage/Popover.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"6EAGO,MAAM,OAAO,GAAG,MAAK;QACxB;AACA,IAAA;AACI,GAAA,GAAA,cAAA,CAAA,cAAA,CAAA;AACI,EAAA,MAAA,OAAA,GAAM,CAAC;AACV,IAAA,IAAA,EAAA,CAAA,CAAA,qCAAA;AACD,GAAA,EAAA;AACI,IAAA,IAAA,EAAA,CAAA,CAAA,0CAAQ,CAAA;AACR,IAAA,KAAA,EAAA;AACH,GAAA,EAAA;AACD,IAAA,IAAA,EAAA,CAAA,CAAA,wCAAA,CAAA;AACI,IAAA,KAAA,EAAA;AACA,GAAA,CAAA;AACH,EAAA,OAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,OAAA,EAAA,GAAA,CAAA,CAAA,IAAA,EAAA,KAAA,KAAA;QACH,CAAA,IAAA,CAAA,KAAA,EAAA;MACF,OACIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAEQ,QAAA,SAAS,EAAC,iCAAQ;aACd;qCAEQ,CAAA,QAAA,EAAA;QAKZ,SAAC,EAAA;aAAM,CAAC,IAAA,CAAA,CAAA;;AAGI,MAAA,OAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;QAKZ,SAAC,EAAA,iCAAA;QAGZ,GAAC,EAAA;AACN,OAAE,EAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA;;;;;"}

package/lib/components/InboxMessage/RightSidebar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IPost } from 'common';
+export interface IRightSidebar extends React.HTMLAttributes<HTMLDivElement> {
+    channelMessages: IPost[];
+    isMobileView: boolean;
+    selectedPost: string;
+}
+export declare const RightSidebar: (props: IRightSidebar) => React.JSX.Element;
+//# sourceMappingURL=RightSidebar.d.ts.map

package/lib/components/InboxMessage/RightSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/RightSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAE/B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,eAAe,EAAE,KAAK,EAAE,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,aAAa,sBAUhD,CAAC"}

package/lib/components/InboxMessage/RightSidebar.js

@@ -0,0 +1,9 @@
+import React__default from'react';import {Slot}from'@common-stack/components-pro';import {MessengerSlotFillNameEnum}from'../../enums/messenger-slot-fill-name-enum.js';const RightSidebar = props => {
+  return React__default.createElement(Slot, {
+    name: MessengerSlotFillNameEnum.INBOX_RIGHT_SIDEBAR,
+    fillProps: {
+      active: true,
+      ...props
+    }
+  });
+};export{RightSidebar};//# sourceMappingURL=RightSidebar.js.map

package/lib/components/InboxMessage/RightSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightSidebar.js","sources":["../../../src/components/InboxMessage/RightSidebar.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"uKAWO,MAAM,YAAY,GAAG,KAAC,IAAsB;SAC/CA,cACI,CAAA,aAAA,CAAA,IAAC,EAAA;AAGO,IAAA,IAAA,EAAA,yBAAY,CAAA,mBAAA;AACZ,IAAA,SAAA,EAAG;AACN,MAAA,MACH,EACJ,IAAA;AACN,MAAE,GAAA;;;"}

package/lib/components/InboxMessage/RightSidebarAi.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface IRightSidebarAi extends React.HTMLAttributes<HTMLDivElement> {
+    channelId: string;
+    detailSidebarOptions: {
+        isMobileView: boolean;
+        isSmallTabletView: boolean;
+        isTabletView: boolean;
+        isDesktopView: boolean;
+        isLargeDesktopView: boolean;
+        isSmallScreen: boolean;
+        [key: string]: any;
+    };
+    windowWidth: number;
+    windowHeight: number;
+    activeTab?: string;
+    setIsLoading?: (isLoading: boolean) => void;
+    isLoading?: boolean;
+    messages?: any[];
+    selectedPost?: any;
+    [key: string]: any;
+}
+export declare const RightSidebarAi: (props: IRightSidebarAi) => React.JSX.Element;
+//# sourceMappingURL=RightSidebarAi.d.ts.map

package/lib/components/InboxMessage/RightSidebarAi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightSidebarAi.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/RightSidebarAi.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,SAAS,EAAE,MAAM,CAAC;IAClB,oBAAoB,EAAE;QAClB,YAAY,EAAE,OAAO,CAAC;QACtB,iBAAiB,EAAE,OAAO,CAAC;QAC3B,YAAY,EAAE,OAAO,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;QACvB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,aAAa,EAAE,OAAO,CAAC;QACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACtB,CAAC;IACF,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,GAAI,OAAO,eAAe,sBAUpD,CAAC"}

package/lib/components/InboxMessage/RightSidebarAi.js

@@ -0,0 +1,9 @@
+import React__default from'react';import {Slot}from'@common-stack/components-pro';import {MessengerSlotFillNameEnum}from'../../enums/messenger-slot-fill-name-enum.js';const RightSidebarAi = props => {
+  return React__default.createElement(Slot, {
+    name: MessengerSlotFillNameEnum.INBOX_WITH_AI_RIGHT_SIDEBAR,
+    fillProps: {
+      active: true,
+      ...props
+    }
+  });
+};export{RightSidebarAi};//# sourceMappingURL=RightSidebarAi.js.map

package/lib/components/InboxMessage/RightSidebarAi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightSidebarAi.js","sources":["../../../src/components/InboxMessage/RightSidebarAi.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"uKA0BO,MAAM,cAAc,GAAG,KAAC,IAAwB;SACnDA,cACI,CAAA,aAAA,CAAA,IAAC,EAAA;AAGO,IAAA,IAAA,EAAA,yBAAY,CAAA,2BAAA;AACZ,IAAA,SAAA,EAAG;AACN,MAAA,MACH,EACJ,IAAA;AACN,MAAE,GAAA;;;"}

package/lib/components/InboxMessage/ServiceConversationItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const ServiceConversationItem: React.MemoExoticComponent<({ showBorder, currentUser, filter, channel, handleSelectChannel, users, selectedChannelId, role, }: {
+    showBorder: any;
+    currentUser: any;
+    filter: any;
+    channel: any;
+    handleSelectChannel: any;
+    users: any;
+    selectedChannelId: any;
+    role: any;
+}) => React.JSX.Element>;
+//# sourceMappingURL=ServiceConversationItem.d.ts.map

package/lib/components/InboxMessage/ServiceConversationItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServiceConversationItem.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/ServiceConversationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAyOvC,eAAO,MAAM,uBAAuB;;;;;;;;;wBAA+C,CAAC"}

package/lib/components/InboxMessage/ServiceConversationItem.js

@@ -0,0 +1,185 @@
+import React__default,{useMemo}from'react';import {useThreadMessagesQuery,OnThreadCreatedUpdatedDocument}from'common/graphql';import {isToday,isYesterday,format}from'date-fns';import {useLocation}from'@remix-run/react';const createdAtText = value => {
+  if (!value) return '';
+  let date = new Date(value);
+  if (isToday(date)) return 'Today';
+  if (isYesterday(date)) return 'Yesterday';
+  return format(new Date(value), 'MMM dd, yyyy');
+};
+// Custom Skeleton component using Tailwind
+const Skeleton = () => React__default.createElement("div", {
+  className: "animate-pulse"
+}, React__default.createElement("div", {
+  className: "h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"
+}), React__default.createElement("div", {
+  className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-2"
+}), React__default.createElement("div", {
+  className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"
+}));
+const ServiceLastMessageComponent = ({
+  subscribeToNewMessages,
+  channel,
+  channelType,
+  lastMessage
+}) => {
+  React__default.useEffect(() => subscribeToNewMessages(), []);
+  return React__default.createElement("div", {
+    className: "flex flex-col w-full"
+  }, React__default.createElement("div", {
+    className: "w-full flex justify-between items-center"
+  }, React__default.createElement("span", {
+    className: "text-xs text-green-500 truncate"
+  }, channelType), React__default.createElement("span", {
+    className: "text-xs text-gray-500"
+  }, lastMessage ? createdAtText(lastMessage?.createdAt) : '')), React__default.createElement("p", {
+    className: "text-sm text-gray-600 dark:text-gray-300 font-bold mt-1"
+  }, channel?.title), React__default.createElement("p", {
+    className: "text-sm text-gray-600 dark:text-gray-400 truncate w-4/5 mt-1"
+  }, lastMessage?.message));
+};
+const ServiceConversationItemComponent = ({
+  showBorder,
+  currentUser,
+  filter,
+  channel,
+  handleSelectChannel,
+  users,
+  selectedChannelId,
+  role
+}) => {
+  const [parentId, setParentId] = React__default.useState(null);
+  const [messages, setMessages] = React__default.useState([]);
+  const [servicePostParentId, setServicePostParentId] = React__default.useState(null);
+  const {
+    pathname
+  } = useLocation();
+  const {
+    data: threadMessages,
+    loading: threadMessageLoading,
+    fetchMore: fetchMoreMessages,
+    refetch: refetchThreadMessages,
+    subscribeToMore
+  } = useThreadMessagesQuery({
+    variables: {
+      channelId: channel?.id?.toString(),
+      role,
+      limit: 10
+    },
+    fetchPolicy: 'cache-and-network'
+  });
+  React__default.useEffect(() => {
+    if (channel) refetchThreadMessages({
+      channelId: channel?.id?.toString(),
+      role,
+      limit: 10
+    });
+  }, [channel]);
+  // }, [selectedChannelId, channel, role]);
+  React__default.useEffect(() => {
+    if (threadMessages?.threadMessages?.data?.length) {
+      const {
+        data
+      } = threadMessages.threadMessages;
+      const replies = data?.map(t => t?.replies)?.flat(1)?.filter(p => p?.message !== '') ?? [];
+      const posts = data?.map(t => t?.post)?.flat(1)?.filter(p => p?.message !== '') ?? [];
+      // const post =
+      //     data?.find((t: any) => {
+      //         return t?.post?.message !== '';
+      //     }) ??
+      //     data?.find((t: any) => {
+      //         return t?.post;
+      //     }) ??
+      //     null;
+      if (replies?.length) {
+        setMessages(pre => [...pre, ...replies]);
+      } else if (posts?.length) {
+        setMessages(pre => [...pre, ...posts]);
+      }
+    }
+  }, [threadMessages]);
+  const lastMessage = useMemo(() => {
+    const threadMessagesData = messages?.flat(1);
+    if (!threadMessagesData?.length) {
+      return null;
+    }
+    let filteredLastMessage = threadMessagesData && threadMessagesData?.length > 1 ? threadMessagesData?.reduce((a, b) => {
+      return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
+    }, []) ?? null : threadMessagesData?.length <= 1 ? threadMessagesData?.[0] ?? [] : null;
+    return filteredLastMessage;
+    // //return data[data.length - 1];
+  }, [messages]);
+  React__default.useEffect(() => {
+    if (lastMessage) {
+      const sParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
+      setServicePostParentId(sParentId);
+    }
+  }, [lastMessage]);
+  const creatorAndMembersId = React__default.useMemo(() => {
+    if (!channel?.members) return null;
+    const membersIds = channel?.members?.filter(m => m?.user?.id !== currentUser?.id)?.map(mu => mu?.user?.id) ?? [];
+    const creatorId = channel?.creator?.id;
+    const mergedIds = [].concat(membersIds, creatorId) ?? [];
+    return mergedIds?.filter((m, pos) => mergedIds?.indexOf(m) === pos) ?? [];
+  }, [channel]);
+  const postParentId = React__default.useMemo(() => {
+    if (!creatorAndMembersId?.length) return null;
+    return creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id) ? 1 : lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id ?? 0;
+  }, [creatorAndMembersId, lastMessage]);
+  React__default.useEffect(() => {
+    if (postParentId) {
+      setParentId(postParentId);
+    }
+  }, [postParentId]);
+  const channelType = useMemo(() => {
+    return channel?.type;
+  }, [channel]);
+  // const servicePostParentId = lastMessage?.parentId ? lastMessage?.parentId : lastMessage?.id;
+  return React__default.createElement("div", {
+    key: `services_channel_${channel.id}`,
+    className: `cursor-pointer flex items-center border-b p-3 ${showBorder ? 'border-gray-300' : 'border-transparent'} ${channel.id == selectedChannelId ? 'bg-gray-300 dark:bg-gray-500' : ''}`,
+    onClick: () => handleSelectChannel(channel.id, postParentId)
+  }, React__default.createElement("div", {
+    className: "w-10 h-10 rounded-full bg-gray-400 flex-shrink-0 overflow-hidden"
+  }, channel?.creator?.picture ? React__default.createElement("img", {
+    src: channel.creator.picture,
+    alt: "Creator avatar",
+    className: "w-full h-full object-cover"
+  }) : React__default.createElement("div", {
+    className: "w-full h-full bg-gray-400"
+  })), React__default.createElement("div", {
+    className: "ml-2 flex-grow min-w-10 max-w-96"
+  }, threadMessageLoading && React__default.createElement(Skeleton, null), !threadMessageLoading && React__default.createElement(ServiceLastMessageComponent, {
+    channel: channel,
+    channelType: channelType,
+    lastMessage: lastMessage,
+    subscribeToNewMessages: () => subscribeToMore({
+      document: OnThreadCreatedUpdatedDocument,
+      variables: {
+        channelId: channel?.id?.toString(),
+        postParentId: postParentId && postParentId == 1 ? null : servicePostParentId
+      },
+      updateQuery: (prev, {
+        subscriptionData
+      }) => {
+        if (!subscriptionData.data) return prev;
+        const newPostThreadData = subscriptionData?.data?.threadCreatedUpdated?.data;
+        const newMessage = subscriptionData?.data?.threadCreatedUpdated?.lastMessage;
+        const updatedData = prev?.threadMessages?.data?.map(t => t.id === newPostThreadData?.id ? {
+          ...t,
+          replies: [...t?.replies, newMessage],
+          replyCount: newPostThreadData?.replyCount,
+          lastReplyAt: newPostThreadData?.lastReplyAt,
+          updatedAt: newPostThreadData?.updatedAt
+        } : t) ?? [];
+        return Object.assign({}, prev, {
+          threadMessages: {
+            ...prev?.threadMessages,
+            totalCount: newPostThreadData?.totalCount ?? 0,
+            //  totalCount: prev?.threadMessages?.totalCount + 1,
+            data: updatedData?.length > 0 ? updatedData : [newPostThreadData]
+          }
+        });
+      }
+    })
+  })));
+};
+const ServiceConversationItem = React__default.memo(ServiceConversationItemComponent);export{ServiceConversationItem};//# sourceMappingURL=ServiceConversationItem.js.map