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

package/lib/components/InboxMessage/InputComponent.js

@@ -0,0 +1,359 @@
+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';import {getAllModels,templateOptions}from'../ModelConfigPanel.js';const InputComponent = ({
+  handleSend: handleSendProp,
+  placeholder,
+  modelConfig,
+  onModelConfigChange
+}) => {
+  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 [showModelDropdown, setShowModelDropdown] = useState(false);
+  const [showTemplateDropdown, setShowTemplateDropdown] = useState(false);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
+  const textareaRef = useRef(null);
+  const modelDropdownRef = useRef(null);
+  const templateDropdownRef = useRef(null);
+  const {
+    t
+  } = useTranslation('translations');
+  // Auto-focus the textarea when component mounts
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, []);
+  // Handle click outside for dropdowns
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (modelDropdownRef.current && !modelDropdownRef.current.contains(event.target)) {
+        setShowModelDropdown(false);
+      }
+      if (templateDropdownRef.current && !templateDropdownRef.current.contains(event.target)) {
+        setShowTemplateDropdown(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+  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;
+  // Get models and templates from ModelConfigPanel
+  const allModelOptions = useMemo(() => {
+    return getAllModels();
+  }, []);
+  const templateOptionsList = useMemo(() => {
+    return templateOptions.map(t => ({
+      value: t.value,
+      label: t.label,
+      icon: t.icon
+    }));
+  }, []);
+  const handleModelSelect = useCallback(modelValue => {
+    if (onModelConfigChange && modelConfig) {
+      onModelConfigChange({
+        ...modelConfig,
+        model: modelValue
+      });
+    }
+    setShowModelDropdown(false);
+  }, [modelConfig, onModelConfigChange]);
+  const handleTemplateSelect = useCallback(templateValue => {
+    if (onModelConfigChange && modelConfig) {
+      onModelConfigChange({
+        ...modelConfig,
+        template: templateValue
+      });
+    }
+    setShowTemplateDropdown(false);
+  }, [modelConfig, onModelConfigChange]);
+  return (
+    // <div className="bg-gray-50 border-t border-gray-200">
+    React__default.createElement("div", {
+      className: "bg-gray-50 border border-gray-200"
+    }, 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-2 rounded-2xl pl-4 pr-4 py-3 resize-none focus:outline-none placeholder-gray-500 transition-all duration-200 ${isFocused ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-300'}`,
+      style: {
+        height: `${inputHeight}px`,
+        minHeight: '120px',
+        maxHeight: '200px'
+      },
+      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: "flex items-center gap-2"
+    }, React__default.createElement(UploadImageButton, {
+      onChange: onUploadImageChange
+    }, React__default.createElement("div", {
+      className: "flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors"
+    }, React__default.createElement("svg", {
+      className: "w-4 h-4 text-gray-600",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24"
+    }, React__default.createElement("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M12 4v16m8-8H4"
+    })))), React__default.createElement("div", {
+      className: "relative",
+      ref: templateDropdownRef
+    }, React__default.createElement("button", {
+      onClick: () => setShowTemplateDropdown(!showTemplateDropdown),
+      className: "flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors min-w-[120px]"
+    }, (() => {
+      if (modelConfig && modelConfig.template) {
+        const currentTemplate = templateOptionsList.find(option => option.value === modelConfig.template);
+        return currentTemplate ? React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
+          className: "text-lg"
+        }, currentTemplate.icon), React__default.createElement("span", {
+          className: "text-gray-700"
+        }, currentTemplate.label)) : React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
+          className: "text-lg"
+        }, "\uD83D\uDCDD"), React__default.createElement("span", {
+          className: "text-gray-500"
+        }, "Template"));
+      }
+      return React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
+        className: "text-lg"
+      }, "\uD83D\uDCDD"), React__default.createElement("span", {
+        className: "text-gray-500"
+      }, "Template"));
+    })(), React__default.createElement("svg", {
+      className: "w-4 h-4 text-gray-500 ml-auto",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24"
+    }, React__default.createElement("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M19 9l-7 7-7-7"
+    }))), showTemplateDropdown && React__default.createElement("div", {
+      className: "absolute bottom-full left-0 mb-2 w-48 bg-white border border-gray-200 rounded-lg shadow-lg z-50"
+    }, React__default.createElement("div", {
+      className: "py-1"
+    }, templateOptionsList.map(option => React__default.createElement("button", {
+      key: option.value,
+      onClick: () => handleTemplateSelect(option.value),
+      className: `w-full px-3 py-2 text-left hover:bg-gray-50 transition-colors flex items-center gap-2 ${modelConfig?.template === option.value ? 'bg-blue-50' : ''}`
+    }, React__default.createElement("span", {
+      className: "text-lg"
+    }, option.icon), React__default.createElement("span", {
+      className: "font-medium text-gray-900"
+    }, option.label)))))), React__default.createElement("div", {
+      className: "relative",
+      ref: modelDropdownRef
+    }, React__default.createElement("button", {
+      onClick: () => setShowModelDropdown(!showModelDropdown),
+      className: "flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors min-w-[140px]"
+    }, (() => {
+      if (modelConfig && modelConfig.model) {
+        const currentModel = allModelOptions.find(option => option.value === modelConfig.model);
+        return currentModel ? React__default.createElement("span", {
+          className: "text-gray-700"
+        }, currentModel.label) : React__default.createElement("span", {
+          className: "text-gray-500"
+        }, "Model");
+      }
+      return React__default.createElement("span", {
+        className: "text-gray-500"
+      }, "Model");
+    })(), React__default.createElement("svg", {
+      className: "w-4 h-4 text-gray-500 ml-auto",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24"
+    }, React__default.createElement("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M19 9l-7 7-7-7"
+    }))), showModelDropdown && React__default.createElement("div", {
+      className: "absolute bottom-full left-0 mb-2 w-64 bg-white border border-gray-200 rounded-lg shadow-lg z-50 max-h-60 overflow-y-auto"
+    }, React__default.createElement("div", {
+      className: "py-1"
+    }, allModelOptions.map(option => React__default.createElement("button", {
+      key: option.value,
+      onClick: () => handleModelSelect(option.value),
+      className: `w-full px-3 py-2 text-left hover:bg-gray-50 transition-colors ${modelConfig?.model === option.value ? 'bg-blue-50' : ''}`
+    }, React__default.createElement("div", {
+      className: "font-medium text-gray-900"
+    }, option.label)))))), React__default.createElement("div", {
+      className: "flex-1"
+    }), React__default.createElement("button", {
+      onClick: () => setShowSettingsModal(true),
+      className: "flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white hover:bg-gray-50 transition-colors"
+    }, React__default.createElement("svg", {
+      className: "w-4 h-4 text-gray-600",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24"
+    }, React__default.createElement("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+    }), React__default.createElement("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+    }))), React__default.createElement("button", {
+      className: `flex items-center justify-center w-8 h-8 rounded-lg border transition-colors ${canSend && !sending ? 'border-blue-500 bg-blue-500 hover:bg-blue-600 text-white' : 'border-gray-300 bg-gray-100 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"
+    }))))), showSettingsModal && React__default.createElement("div", {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+    }, React__default.createElement("div", {
+      className: "bg-white rounded-lg shadow-xl max-w-md w-full mx-4"
+    }, React__default.createElement("div", {
+      className: "p-6 mb-4"
+    }, React__default.createElement("div", {
+      className: "flex items-center justify-between mb-4"
+    }, React__default.createElement("h3", {
+      className: "text-lg font-semibold text-gray-900"
+    }, "Project Settings"), React__default.createElement("button", {
+      onClick: () => setShowSettingsModal(false),
+      className: "text-gray-400 hover:text-gray-600 transition-colors"
+    }, React__default.createElement("svg", {
+      className: "w-6 h-6",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24"
+    }, React__default.createElement("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M6 18L18 6M6 6l12 12"
+    })))), modelConfig && onModelConfigChange && React__default.createElement("div", {
+      className: "space-y-4"
+    }, React__default.createElement("div", null, React__default.createElement("label", {
+      className: "block text-sm font-medium text-gray-700 mb-2"
+    }, "API Key"), React__default.createElement("input", {
+      type: "password",
+      value: modelConfig.apiKey,
+      onChange: e => onModelConfigChange({
+        ...modelConfig,
+        apiKey: e.target.value
+      }),
+      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+      placeholder: "Enter your API key"
+    })), React__default.createElement("div", null, React__default.createElement("label", {
+      className: "block text-sm font-medium text-gray-700 mb-2"
+    }, "Model"), React__default.createElement("select", {
+      value: modelConfig.model,
+      onChange: e => onModelConfigChange({
+        ...modelConfig,
+        model: e.target.value
+      }),
+      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+    }, allModelOptions.map(option => React__default.createElement("option", {
+      key: option.value,
+      value: option.value
+    }, option.label)))))))))
+  );
+};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":["React"],"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"}