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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+interface ConversationItemProps {
+    showBorder: boolean;
+    currentUser: any;
+    filter: string;
+    channel: any;
+    handleSelectChannel: (channelId: string) => void;
+    users: any[];
+    selectedChannelId: string;
+    messagesQuery: any;
+}
+export declare const ConversationItem: React.MemoExoticComponent<({ showBorder, currentUser, filter, channel, handleSelectChannel, users, selectedChannelId, messagesQuery: messagesQueryProp, }: ConversationItemProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=ConversationItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationItem.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/ConversationItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAqBzE,UAAU,qBAAqB;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,GAAG,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,GAAG,CAAC;IACb,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6JAUtB,qBAAqB,uBAuL3B,CAAC"}

package/lib/components/InboxMessage/ConversationItem.js

@@ -0,0 +1,200 @@
+import {useMessagesQuery,OnChatMessageAddedDocument}from'common/graphql';import {isToday,isYesterday,format}from'date-fns';import React__default,{useState,useMemo}from'react';import {SubscriptionHandler}from'./SubscriptionHandler.js';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 for loading state
+const Skeleton = ({
+  className = ''
+}) => {
+  return React__default.createElement("div", {
+    className: `animate-pulse bg-gray-300 dark:bg-gray-600 rounded ${className}`
+  }, React__default.createElement("div", {
+    className: "h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-2"
+  }), React__default.createElement("div", {
+    className: "h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/2"
+  }));
+};
+const ConversationItem = React__default.memo(({
+  showBorder,
+  currentUser,
+  filter,
+  channel,
+  handleSelectChannel,
+  users,
+  selectedChannelId,
+  messagesQuery: messagesQueryProp
+}) => {
+  // const {
+  //     data: messagesQuery,
+  //     loading: messageLoading,
+  // } = useMessagesQuery({
+  //     variables: {
+  //         channelId: channel.id?.toString(),
+  //         limit: 1,
+  // },
+  //     fetchPolicy: 'cache-and-network',
+  // });
+  const [messages, setMessages] = useState([]);
+  const {
+    data: messagesQuery,
+    loading: messageLoading,
+    refetch: refetchMessages,
+    subscribeToMore
+  } = useMessagesQuery({
+    variables: {
+      channelId: channel?.id?.toString(),
+      parentId: null,
+      limit: 10
+      // sort: {
+      //     key: 'updatedAt',
+      //     value: SortEnum.Desc,
+      // },
+    },
+    fetchPolicy: 'cache-and-network',
+    refetchWritePolicy: 'merge'
+  });
+  // const {
+  //     data: newMessage,
+  //     loading: newMsgLoading,
+  //     error: newMsgError,
+  // }: any = useOnChatMessageAddedSubscription({
+  //     variables: {
+  //         channelId: channel?.id?.toString(),
+  //     },
+  // });
+  React__default.useEffect(() => {
+    if (channel?.id) {
+      refetchMessages({
+        channelId: channel?.id?.toString(),
+        parentId: null,
+        limit: 10
+        // sort: {
+        //     key: 'updatedAt',
+        //     value: SortEnum.Desc,
+        // },
+      });
+    }
+  }, [channel?.id, refetchMessages]);
+  React__default.useEffect(() => {
+    if (messagesQuery?.messages?.data?.length) {
+      setMessages(messagesQuery.messages.data);
+    }
+  }, [messagesQuery?.messages?.data]);
+  const chatUser = useMemo(() => users?.find(({
+    id
+  }) => {
+    const isNotCurrentUser = id !== currentUser?.id;
+    if (isNotCurrentUser) {
+      return channel?.members?.find(({
+        user
+      }) => user.id === id);
+    }
+    if (channel?.members?.length === 1 && channel?.members?.[0]?.user?.id === currentUser?.id) {
+      return currentUser;
+    }
+    return isNotCurrentUser;
+  }), [users, currentUser, channel]);
+  // Last Message
+  // const lastMessage = useMemo(() => {
+  //     if (!messagesQuery?.messages?.data?.length) {
+  //         return null;
+  //     }
+  //     const { data } = messagesQuery.messages;
+  //     return data[data.length - 1];
+  // }, [messagesQuery]);
+  const lastMessage = useMemo(() => {
+    if (!messages?.length) {
+      return null;
+    }
+    const data = messages;
+    const filteredData = data?.filter(p => p?.message !== '');
+    //return filteredData[0];
+    let filteredLastMessage = filteredData && filteredData?.length ? filteredData?.reduce((a, b) => {
+      return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
+    }, []) ?? null : null;
+    return filteredLastMessage;
+    // //return data[data.length - 1];
+  }, [messages]);
+  const channelType = useMemo(() => {
+    return channel?.type;
+  }, [channel]);
+  if (filter && !chatUser?.username?.toLowerCase().includes(filter.toLowerCase()) && !lastMessage?.message?.toLowerCase().includes(filter.toLowerCase())) {
+    return null;
+  }
+  return React__default.createElement("div", {
+    key: `conv_channel_${channel.id}`,
+    className: `cursor-pointer flex items-center p-3 border-b ${showBorder ? 'border-gray-300' : 'border-transparent'} ${channel.id == selectedChannelId ? 'bg-gray-300 dark:bg-gray-500' : 'hover:bg-gray-50 dark:hover:bg-gray-700'}`,
+    onClick: () => channel.id !== selectedChannelId && handleSelectChannel(channel.id)
+  }, React__default.createElement("img", {
+    className: "w-10 h-10 rounded-full bg-gray-400 object-cover flex-shrink-0",
+    src: chatUser?.picture || '/default-avatar.svg',
+    alt: chatUser?.givenName || 'User avatar',
+    onError: e => {
+      // Prevent infinite loop by checking if we're already showing the fallback
+      if (e.currentTarget.src.includes('default-avatar.svg')) {
+        // If SVG also fails, use a data URL fallback
+        e.currentTarget.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIgZmlsbD0iI0U1RTdFQiIvPgogIDxjaXJjbGUgY3g9IjIwIiBjeT0iMTYiIHI9IjYiIGZpbGw9IiM5Q0EzQUYiLz4KICA8cGF0aCBkPSJNOCAzMmMwLTYuNjI3IDUuMzczLTEyIDEyLTEyczEyIDUuMzczIDEyIDEyIiBmaWxsPSIjOUNBM0FGIi8+Cjwvc3ZnPgo=';
+      } else {
+        e.currentTarget.src = '/default-avatar.svg';
+      }
+    }
+  }), React__default.createElement("div", {
+    className: "ml-2 flex-grow min-w-10 max-w-96"
+  }, messageLoading && React__default.createElement(Skeleton, {
+    className: "w-full h-16"
+  }), !messageLoading && React__default.createElement(React__default.Fragment, null, React__default.createElement(LastMessageComponent, {
+    lastMessage: lastMessage,
+    channelType: channelType,
+    chatUser: chatUser
+  }), React__default.createElement(SubscriptionHandler, {
+    subscribeToMore: subscribeToMore,
+    document: OnChatMessageAddedDocument,
+    variables: {
+      channelId: channel?.id?.toString()
+    },
+    enabled: !!channel?.id && !!subscribeToMore,
+    updateQuery: (prev, {
+      subscriptionData
+    }) => {
+      if (!subscriptionData.data) return prev;
+      const newMessage = subscriptionData?.data?.chatMessageAdded;
+      console.log('ConversationItem: New message received via subscription:', newMessage);
+      const previousData = prev?.messages?.data ? [...prev.messages.data, newMessage] : [];
+      const totalMsgCount = prev?.messages?.totalCount + 1;
+      const merged = {
+        ...prev,
+        messages: {
+          ...prev?.messages,
+          data: previousData,
+          totalCount: totalMsgCount
+        }
+      };
+      return merged;
+    },
+    onError: error => {
+      console.error('ConversationItem: Subscription error:', error);
+    }
+  }))));
+});
+const LastMessageComponent = React__default.memo(({
+  lastMessage,
+  channelType,
+  chatUser
+}) => {
+  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"
+  }, chatUser?.givenName + ' ' + chatUser?.familyName), React__default.createElement("p", {
+    className: "text-sm text-gray-600 dark:text-gray-400 truncate w-4/5 mt-1 line-clamp-1"
+  }, lastMessage?.message && lastMessage.message.length > 30 ? lastMessage.message.slice(0, 30) + '…' : lastMessage?.message));
+});export{ConversationItem};//# sourceMappingURL=ConversationItem.js.map

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ModelConfig } from '../../hooks/usePersistentModelConfig';
+type MessageInputProps = {
+    channelId?: string;
+    handleSend?: (message: string, files: File[]) => Promise<void>;
+    placeholder?: string;
+    modelConfig?: ModelConfig;
+    onModelConfigChange?: (config: ModelConfig) => void;
+    textareaClassName?: string;
+    textareaStyles?: React.CSSProperties;
+    toolBarParentClassName?: string;
+    showModelToolbarProjectSettings?: boolean;
+    isShowMeta?: boolean;
+    showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
+};
+export declare const InputComponent: ({ handleSend: handleSendProp, placeholder, modelConfig, onModelConfigChange, textareaClassName, toolBarParentClassName, textareaStyles, showModelToolbarProjectSettings, isShowMeta, showModeSelector, showStopButton, onStop, }: MessageInputProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=InputComponent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputComponent.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/InputComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,KAAK,iBAAiB,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,kOAa5B,iBAAiB,sBAiKnB,CAAC"}

package/lib/components/InboxMessage/InputComponent.js

@@ -0,0 +1,148 @@
+import React__default,{useState,useRef,useEffect,useCallback,useMemo}from'react';import {useTranslation}from'react-i18next';import {config}from'../../config/env-config.js';import {FilesList}from'../inbox/FilesList.js';import'../inbox/MessageItem.js';import'../inbox/ThreadItem.js';import {ModelToolbar}from'../ModelConfigPanel.js';const InputComponent = ({
+  handleSend: handleSendProp,
+  placeholder,
+  modelConfig,
+  onModelConfigChange,
+  textareaClassName,
+  toolBarParentClassName,
+  textareaStyles,
+  showModelToolbarProjectSettings = false,
+  isShowMeta = false,
+  showModeSelector = false,
+  showStopButton = false,
+  onStop
+}) => {
+  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();
+    }
+  }, []);
+  // Ensure default template is set to 'vite-react' if missing
+  useEffect(() => {
+    if (modelConfig && !modelConfig.template && onModelConfigChange) {
+      onModelConfigChange({
+        ...modelConfig,
+        template: 'vite-react'
+      });
+    }
+  }, [modelConfig, onModelConfigChange]);
+  // no dropdowns managed here; toolbar handles its own
+  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(120, Math.min(200, 120 + (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;
+  message.trim().length > 0;
+  // toolbar now owns model/template selections
+  return (
+    // <div className="bg-gray-50 border-t border-gray-200">
+    React__default.createElement("div", {
+      className: "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-200"
+    }, React__default.createElement(FilesList, {
+      files: files
+    })), React__default.createElement("div", {
+      className: "px-4 py-3"
+    }, React__default.createElement("div", {
+      className: "relative mb-3"
+    }, React__default.createElement("textarea", {
+      ref: textareaRef,
+      className: `w-full text-base bg-white border border-gray-300 rounded-2xl pl-4 pr-4 py-3 resize-none focus:border-gray-300 focus:outline-none placeholder-gray-500 transition-all duration-200 ${isFocused ? 'border-gray-400 ring-2 ring-gray-300 focus:ring-gray-300' : 'border-gray-300'} ${textareaClassName}`,
+      style: {
+        height: `${inputHeight}px`,
+        minHeight: '120px',
+        maxHeight: '200px',
+        ...textareaStyles
+      },
+      placeholder: placeholder || 'Message',
+      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: `${toolBarParentClassName}`
+    }, React__default.createElement(ModelToolbar, {
+      modelConfig: modelConfig,
+      onModelConfigChange: onModelConfigChange,
+      sending: sending,
+      canSend: !!canSend,
+      onSend: handleSend,
+      onUploadImageChange: onUploadImageChange,
+      showProjectSettings: showModelToolbarProjectSettings,
+      isShowMeta: isShowMeta,
+      showModeSelector: showModeSelector,
+      showStopButton: showStopButton,
+      onStop: onStop
+    }))))
+  );
+};export{InputComponent};//# sourceMappingURL=InputComponent.js.map

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+type LeftSidebarProps = {
+    userChannels: any;
+    userChannelsLoading: boolean;
+    currentUser: any;
+    users?: any[];
+    handleSelectChannel: (channel: any, postId?: any) => void;
+    clearMessages?: () => void;
+    selectedChannelId?: any;
+    channelToTop: number;
+    getChannelsRefetch: any;
+    supportServices?: any;
+    role?: any;
+    messagesQuery?: any;
+    windowHeight?: number;
+    windowWidth?: number;
+};
+export declare const LeftSidebar: React.MemoExoticComponent<(props: LeftSidebarProps) => React.JSX.Element>;
+export {};
+//# sourceMappingURL=LeftSidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LeftSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/LeftSidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAO5D,KAAK,gBAAgB,GAAG;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IACd,mBAAmB,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,oCAAsB,gBAAgB,uBA6F5D,CAAC"}

package/lib/components/InboxMessage/LeftSidebar.js

@@ -0,0 +1,102 @@
+import {GoSearch}from'@react-icons/all-files/go/GoSearch.js';import React__default,{useState,useMemo}from'react';import {useTranslation}from'react-i18next';import {orderBy,uniqBy}from'lodash-es';import {ConversationItem}from'./ConversationItem.js';import {ServiceConversationItem}from'./ServiceConversationItem.js';import {RoomType}from'common';const LeftSidebar = React__default.memo(props => {
+  const {
+    currentUser,
+    handleSelectChannel,
+    users,
+    userChannels,
+    userChannelsLoading,
+    selectedChannelId,
+    supportServices,
+    role,
+    messagesQuery,
+    windowHeight = 768,
+    windowWidth = 1024
+  } = props;
+  const [keyword, setKeyword] = useState('');
+  const {
+    t
+  } = useTranslation('translations');
+  // Memoize the sorted channels to prevent unnecessary re-renders
+  const sortedChannels = useMemo(() => {
+    if (!userChannels?.length) return [];
+    return orderBy(uniqBy([...userChannels], ({
+      id
+    }) => id), ['updatedAt'], ['desc']);
+  }, [userChannels]);
+  if (userChannelsLoading) {
+    return React__default.createElement("div", {
+      className: "space-y-4"
+    }, Array(10).fill(1).map((x, y) => React__default.createElement("div", {
+      key: y,
+      className: "h-10 bg-gray-200 rounded animate-pulse"
+    })));
+  }
+  return React__default.createElement("div", {
+    className: "w-full flex flex-col bg-white",
+    style: {
+      height: `${windowHeight}px`,
+      maxHeight: '100vh'
+    }
+  }, React__default.createElement("div", {
+    className: "flex-shrink-0 p-3 sm:p-4 border-b border-gray-200"
+  }, React__default.createElement(SearchInput, {
+    keyword: keyword,
+    setKeyword: setKeyword
+  })), React__default.createElement("div", {
+    className: "flex-1 min-h-0 overflow-hidden"
+  }, React__default.createElement("div", {
+    className: "overflow-y-auto p-2 sm:p-4 space-y-1",
+    style: {
+      height: `${windowHeight - 80}px`,
+      // Subtract header height
+      minHeight: 0
+    }
+  }, React__default.createElement(React__default.Fragment, null, supportServices ? supportServices : React__default.createElement(React__default.Fragment, null), sortedChannels.length > 0 ? sortedChannels.map((channel, index) => channel?.type === RoomType.Service ? React__default.createElement(ServiceConversationItem, {
+    key: `service_channel_${channel.id}`,
+    filter: keyword,
+    channel: channel,
+    currentUser: currentUser,
+    handleSelectChannel: handleSelectChannel,
+    users: users,
+    selectedChannelId: selectedChannelId,
+    showBorder: index != sortedChannels.length - 1,
+    role: role || null
+  }) : React__default.createElement(ConversationItem, {
+    key: `conv_channel_${channel.id}`,
+    filter: keyword,
+    channel: channel,
+    currentUser: currentUser,
+    handleSelectChannel: handleSelectChannel,
+    users: users,
+    selectedChannelId: selectedChannelId,
+    showBorder: index != sortedChannels.length - 1,
+    messagesQuery: messagesQuery
+  })) : React__default.createElement("div", {
+    className: "text-center py-8 text-gray-500"
+  }, React__default.createElement("div", {
+    className: "text-3xl mb-2"
+  }, "\uD83D\uDCAC"), React__default.createElement("p", null, "No conversations yet"))))));
+});
+const SearchInput = ({
+  keyword,
+  setKeyword
+}) => {
+  const {
+    t
+  } = useTranslation('translations');
+  return React__default.createElement("div", {
+    className: "w-full"
+  }, React__default.createElement("div", {
+    className: "relative"
+  }, React__default.createElement("input", {
+    type: "text",
+    placeholder: t('tailwind_ui_inbox.search_inbox') || 'Search Inbox',
+    className: "w-full pl-10 sm:pl-12 pr-4 py-2 sm:py-2.5 bg-gray-50 border border-gray-200 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-blue-400 focus:border-blue-400 focus:bg-white transition-all duration-200 text-sm",
+    value: keyword,
+    onChange: e => setKeyword(e.target.value)
+  }), React__default.createElement("div", {
+    className: "absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2"
+  }, React__default.createElement(GoSearch, {
+    className: "w-4 h-4 text-gray-400"
+  }))));
+};export{LeftSidebar};//# sourceMappingURL=LeftSidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LeftSidebar.js","sources":["../../../src/components/InboxMessage/LeftSidebar.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"yVA0BO,MAAM,WAAW,GAAGA,cAAK,CAAC,IAAI,CAAC,KAAC,IAAyB;AAC5D,EAAA,MAAA;IAaA,WAAO;IACP;IAEA,KAAA;AACA,IAAA,YAAM;uBACG;AAAsB,IAAA,iBAAS;mBAC7B;AAKX,IAAA,IAAI;IAEJ,aAAI;gBAEI;eAES,GAAK;;QAMrB,CAAA,OAAA,EAAA,UAAA,CAAA,GAAA,QAAA,CAAA,EAAA,CAAA;AACD,EAAA,MAAA;;oBAGY,CAAA,cAAC,CAAA;;AAGD,EAAA,MAAA,cAAA,GAAA,OAAA,CAAA,MAAA;AAGQ,IAAA,IAAA,CAAA,YAAA,EAAA,MAAQ,EAAG,OAAA,EAAA;AACX,IAAA,OAAA,OAAA,CAAA,MAAA,CAAA,CAAA,eAAY,CAAA,EAAA,CAAA;AACf,MAAA;AAED,KAAA,KAAA,EAAA,CAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA;AACK,EAAA,CAAA,EAAA,CAAA,YAAA,CAAA,CAAA;AAEA,EAAA,IAAA,mBAAA,EAAA;uCA8BO,CAAA,KAAA,EAAA;AACA,MAAA,SAAA,EAAA;AAQhC,KAAG,EAAA,KAAA,CAAA,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,KAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAEH,MAAM,GAAA,EAAA,CAAA;MACF,SAAW,EAAA;AACX,KAAA,CAAA,CAAA,CAAA;;AAGY,EAAA,OAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;aAOA,EAAA,+BAAK;;AAMrB,MAAE,MAAA,EAAA,CAAA,EAAA,YAAA,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/InboxMessage/MessageInput.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 MessageInput: ({ handleSend: handleSendProp, placeholder }: MessageInputProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=MessageInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/InboxMessage/MessageInput.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,YAAY,GAAI,6CAA6C,iBAAiB,sBAoM1F,CAAC"}