agx-chat-web 1.1.0 → 1.2.1

package/src/app/Messenger/components/SystemMessage/SystemMessage.tsx

@@ -1,25 +1,25 @@
-import React from 'react'
-import useTheme from '../../hooks/useThemes'
-import { IInconmingMessage } from 'types'
-
-function SystemMessage ({ date, message, formatDate, id }: IInconmingMessage) {
-  const { theme } = useTheme()
-
-  return (
-    <div className='messenger__messages-row--system' id={id}>
-      <div
-        className='messenger__messages-received messenger__messages-received--system'
-        style={{ background: theme?.messengerSystemColor }}
-      >
-        <span>
-          <p className='messenger__message'>{message}</p>
-          <p className='messenger__message--date'>
-            {formatDate(date) ?? new Date(date).toString()}
-          </p>
-        </span>
-      </div>
-    </div>
-  )
-}
-
-export default SystemMessage
+import React from 'react'
+import useTheme from '../../hooks/useThemes'
+import { IInconmingMessage } from 'types'
+
+function SystemMessage ({ date, message, formatDate, id }: IInconmingMessage) {
+  const { theme } = useTheme()
+
+  return (
+    <div className='messenger__messages-row--system' id={id}>
+      <div
+        className='messenger__messages-received messenger__messages-received--system'
+        style={{ background: theme?.messengerSystemColor }}
+      >
+        <span>
+          <p className='messenger__message'>{message}</p>
+          <p className='messenger__message--date'>
+            {formatDate(date) ?? new Date(date).toString()}
+          </p>
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default SystemMessage

package/src/app/Messenger/components/TextArea/TextArea.tsx

@@ -1,35 +1,35 @@
-import React from 'react'
-import useTheme from '../../hooks/useThemes'
-interface IProps {
-  label: string
-  onChange: (value: string) => void
-  name: string
-  placeholder: string
-}
-
-function Textarea ({ name, placeholder, label, onChange }: IProps) {
-  const { theme } = useTheme()
-  return (
-    <div className='text-area'>
-      <label
-        htmlFor={name}
-        className='text-area__label'
-        style={{ color: theme.newChatFormTexts }}
-      >
-        {label}
-      </label>
-      <textarea
-        style={{
-          backgroundColor: theme.inputBg,
-          color: theme.newChatFormTexts,
-        }}
-        name={name}
-        placeholder={placeholder}
-        className='text-area__input'
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </div>
-  )
-}
-
-export default Textarea
+import React from 'react'
+import useTheme from '../../hooks/useThemes'
+interface IProps {
+  label: string
+  onChange: (value: string) => void
+  name: string
+  placeholder: string
+}
+
+function Textarea ({ name, placeholder, label, onChange }: IProps) {
+  const { theme } = useTheme()
+  return (
+    <div className='text-area'>
+      <label
+        htmlFor={name}
+        className='text-area__label'
+        style={{ color: theme.newChatFormTexts }}
+      >
+        {label}
+      </label>
+      <textarea
+        style={{
+          backgroundColor: theme.inputBg,
+          color: theme.newChatFormTexts,
+        }}
+        name={name}
+        placeholder={placeholder}
+        className='text-area__input'
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  )
+}
+
+export default Textarea

package/src/app/Messenger/components/TextArea/Textarea.less

@@ -1,22 +1,22 @@
-.text-area {
-  margin-bottom: 1rem;
-  width: 100%;
-
-  &__label {
-    color: @title-form-color;
-    font-weight: bold;
-    margin: 0.5rem;
-  }
-
-  &__input {
-    border: 1.5px solid hsl(0, 0%, 80%);
-    border-radius: 4px;
-    margin-top: 0.5rem;
-    padding: 4px 8px;
-    width: 100%;
-
-    &:focus {
-      outline: #2684ff 2px solid !important;
-    }
-  }
-}
+.text-area {
+  margin-bottom: 1rem;
+  width: 100%;
+
+  &__label {
+    color: @title-form-color;
+    font-weight: bold;
+    margin: 0.5rem;
+  }
+
+  &__input {
+    border: 1.5px solid hsl(0, 0%, 80%);
+    border-radius: 4px;
+    margin-top: 0.5rem;
+    padding: 4px 8px;
+    width: 100%;
+
+    &:focus {
+      outline: #2684ff 2px solid !important;
+    }
+  }
+}

package/src/app/Messenger/components/Tooltip/Tooltip.less

@@ -1,27 +1,27 @@
-.tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip__text {
-  visibility: hidden;
-  background-color: black;
-  color: #fff;
-  text-align: center;
-  border-radius: 5px;
-  padding: 5px;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%;
-  left: -40%;
-  margin-left: -60px;
-  opacity: 0;
-  transition:
-    opacity 0.3s,
-    visibility 0.3s;
-}
-
-.tooltip:hover .tooltip__text {
-  visibility: visible;
-  opacity: 1;
-}
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip__text {
+  visibility: hidden;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 5px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: -40%;
+  margin-left: -60px;
+  opacity: 0;
+  transition:
+    opacity 0.3s,
+    visibility 0.3s;
+}
+
+.tooltip:hover .tooltip__text {
+  visibility: visible;
+  opacity: 1;
+}

package/src/app/Messenger/components/Tooltip/Tooltip.tsx

@@ -1,17 +1,17 @@
-import React, { ReactNode } from 'react'
-
-interface ToolTipProps {
-  text: string
-  children: ReactNode
-}
-
-const ToolTip: React.FC<ToolTipProps> = ({ text, children }) => {
-  return (
-    <div className='tooltip'>
-      {children}
-      <div className='tooltip__text'>{text}</div>
-    </div>
-  )
-}
-
-export default ToolTip
+import React, { ReactNode } from 'react'
+
+interface ToolTipProps {
+  text: string
+  children: ReactNode
+}
+
+const ToolTip: React.FC<ToolTipProps> = ({ text, children }) => {
+  return (
+    <div className='tooltip'>
+      {children}
+      <div className='tooltip__text'>{text}</div>
+    </div>
+  )
+}
+
+export default ToolTip

package/src/app/Messenger/hooks/useConversations.tsx

@@ -1,143 +1,143 @@
-import { useState } from 'react'
-import { IList } from 'types'
-
-type _viewDesktop = 'empty' | 'messages' | 'newChat'
-type _viewMobile = 'list' | 'messages'
-
-export const useConversations = () => {
-  const SLICE = 15
-  const [sliceCount, setSliceCount] = useState(SLICE)
-  const [conversations, setConversations] = useState<IList[]>([])
-  const [currentChat, setCurrentChat] = useState<IList>()
-  const [viewDesktop, setViewDesktop] = useState<_viewDesktop>('empty')
-  const [viewMobile, setViewMobile] = useState<'list' | 'messages'>('list')
-
-  const changeViewDesktop = (view: _viewDesktop) => {
-    setViewDesktop(view)
-  }
-
-  const changeViewMobile = (view: _viewMobile) => {
-    setViewMobile(view)
-  }
-
-  const selectChat = (chat: IList) => {
-    setCurrentChat(chat)
-  }
-
-  const onIntersect = () => {
-    setSliceCount((prev) => {
-      const count = prev + SLICE
-      return count
-    })
-  }
-
-  const hasNext = () => {
-    return conversations.length >= sliceCount
-  }
-
-  const resetConversations = () => {
-    setConversations([])
-  }
-
-  const mapConversationsUnread = (prev: IList[]) => (id: string) => {
-    return (prev || []).map((conversation) => {
-      if (conversation?._id === id) {
-        return {
-          ...conversation,
-          totalUnreadMessages: 0,
-        }
-      }
-
-      return conversation
-    })
-  }
-
-  const reorderConversations = (conversations: IList[], ticketId?: string) => {
-    const index = conversations.findIndex(
-      (conversation) => conversation._id === ticketId
-    )
-    if (index !== -1) {
-      const conversationToMove = conversations.splice(index, 1)[0]
-      conversations.unshift(conversationToMove)
-    }
-  }
-
-  const mapConversationsIncrementUnread =
-    (prev: IList[], ticketId?: string) => (id: string) => {
-      const updatedConversations = (prev || []).map((conversation) => {
-        if (conversation._id === id) {
-          return {
-            ...conversation,
-            totalUnreadMessages:
-              ticketId === id ? 0 : conversation.totalUnreadMessages + 1,
-          }
-        }
-        return conversation
-      })
-
-      reorderConversations(updatedConversations, ticketId)
-
-      return updatedConversations
-    }
-
-  const setAsRead = (id: string) => {
-    setConversations((prev) => mapConversationsUnread(prev)(id))
-  }
-
-  const addConversations = (
-    conversations: IList[],
-    goToNewConversation?: (chat: IList) => void
-  ) => {
-    setConversations(conversations)
-
-    if (goToNewConversation) goToNewConversation(conversations[0])
-  }
-
-  const addOneUnreadToTicket = (ticketId: string, currentChat?: string) => {
-    setConversations((prev) => {
-      return mapConversationsIncrementUnread(prev, currentChat)(ticketId)
-    })
-  }
-
-  const removeClosedConversation = (ticketId: string) => {
-    const filtred = conversations.filter(
-      (conversation) => conversation._id !== ticketId
-    )
-    addConversations(filtred)
-  }
-
-  const closeIfIsCurrent = (ticketId: string) => {
-    if (ticketId === currentChat?._id) {
-      changeViewDesktop('empty')
-      changeViewMobile('list')
-    }
-  }
-
-  const onCloseChat = (ticketId: string) => {
-    removeClosedConversation(ticketId)
-    closeIfIsCurrent(ticketId)
-  }
-
-  const reset = () => {
-    setSliceCount(SLICE)
-    resetConversations()
-  }
-
-  return {
-    onIntersect,
-    reset,
-    conversations,
-    hasNext,
-    addConversations,
-    addOneUnreadToTicket,
-    setAsRead,
-    sliceCount,
-    currentChat,
-    selectChat,
-    onCloseChat,
-    changeViewDesktop,
-    viewDesktop,
-    changeViewMobile,
-    viewMobile,
-  }
-}
+import { useState } from 'react'
+import { IList } from 'types'
+
+type _viewDesktop = 'empty' | 'messages' | 'newChat'
+type _viewMobile = 'list' | 'messages'
+
+export const useConversations = () => {
+  const SLICE = 15
+  const [sliceCount, setSliceCount] = useState(SLICE)
+  const [conversations, setConversations] = useState<IList[]>([])
+  const [currentChat, setCurrentChat] = useState<IList>()
+  const [viewDesktop, setViewDesktop] = useState<_viewDesktop>('empty')
+  const [viewMobile, setViewMobile] = useState<'list' | 'messages'>('list')
+
+  const changeViewDesktop = (view: _viewDesktop) => {
+    setViewDesktop(view)
+  }
+
+  const changeViewMobile = (view: _viewMobile) => {
+    setViewMobile(view)
+  }
+
+  const selectChat = (chat: IList) => {
+    setCurrentChat(chat)
+  }
+
+  const onIntersect = () => {
+    setSliceCount((prev) => {
+      const count = prev + SLICE
+      return count
+    })
+  }
+
+  const hasNext = () => {
+    return conversations.length >= sliceCount
+  }
+
+  const resetConversations = () => {
+    setConversations([])
+  }
+
+  const mapConversationsUnread = (prev: IList[]) => (id: string) => {
+    return (prev || []).map((conversation) => {
+      if (conversation?._id === id) {
+        return {
+          ...conversation,
+          totalUnreadMessages: 0,
+        }
+      }
+
+      return conversation
+    })
+  }
+
+  const reorderConversations = (conversations: IList[], ticketId?: string) => {
+    const index = conversations.findIndex(
+      (conversation) => conversation._id === ticketId
+    )
+    if (index !== -1) {
+      const conversationToMove = conversations.splice(index, 1)[0]
+      conversations.unshift(conversationToMove)
+    }
+  }
+
+  const mapConversationsIncrementUnread =
+    (prev: IList[], ticketId?: string) => (id: string) => {
+      const updatedConversations = (prev || []).map((conversation) => {
+        if (conversation._id === id) {
+          return {
+            ...conversation,
+            totalUnreadMessages:
+              ticketId === id ? 0 : conversation.totalUnreadMessages + 1,
+          }
+        }
+        return conversation
+      })
+
+      reorderConversations(updatedConversations, ticketId)
+
+      return updatedConversations
+    }
+
+  const setAsRead = (id: string) => {
+    setConversations((prev) => mapConversationsUnread(prev)(id))
+  }
+
+  const addConversations = (
+    conversations: IList[],
+    goToNewConversation?: (chat: IList) => void
+  ) => {
+    setConversations(conversations)
+
+    if (goToNewConversation) goToNewConversation(conversations[0])
+  }
+
+  const addOneUnreadToTicket = (ticketId: string, currentChat?: string) => {
+    setConversations((prev) => {
+      return mapConversationsIncrementUnread(prev, currentChat)(ticketId)
+    })
+  }
+
+  const removeClosedConversation = (ticketId: string) => {
+    const filtred = conversations.filter(
+      (conversation) => conversation._id !== ticketId
+    )
+    addConversations(filtred)
+  }
+
+  const closeIfIsCurrent = (ticketId: string) => {
+    if (ticketId === currentChat?._id) {
+      changeViewDesktop('empty')
+      changeViewMobile('list')
+    }
+  }
+
+  const onCloseChat = (ticketId: string) => {
+    removeClosedConversation(ticketId)
+    closeIfIsCurrent(ticketId)
+  }
+
+  const reset = () => {
+    setSliceCount(SLICE)
+    resetConversations()
+  }
+
+  return {
+    onIntersect,
+    reset,
+    conversations,
+    hasNext,
+    addConversations,
+    addOneUnreadToTicket,
+    setAsRead,
+    sliceCount,
+    currentChat,
+    selectChat,
+    onCloseChat,
+    changeViewDesktop,
+    viewDesktop,
+    changeViewMobile,
+    viewMobile,
+  }
+}

package/src/app/Messenger/hooks/useMessages.tsx

@@ -1,49 +1,49 @@
-import { useState } from 'react'
-import { IMessages, ISocketMessage } from 'types'
-
-export const useMessages = () => {
-  const [messages, setMessages] = useState<IMessages[]>([])
-  const [totalMessages, setTotalMessages] = useState<number>(0)
-
-  const addMessages = (messages: IMessages[]) => {
-    setMessages(messages)
-  }
-  const addTotalMessages = (total: number) => {
-    setTotalMessages(total)
-  }
-
-  const incrementMessages = (ticket: ISocketMessage, currentChatId: string) => {
-    const existentMessage = messages.find(
-      (item) => item.messagecode === ticket.message.messagecode
-    )
-    if (ticket.message.ticketId === currentChatId && !existentMessage) {
-      addMessages([...messages, ticket.message])
-    }
-  }
-
-  const updateMesssagesAsRead = (
-    ticket: ISocketMessage,
-    currentChatId: string
-  ) => {
-    if (ticket.markAsRead || currentChatId === ticket?.message?.ticketId) {
-      const readMessages = messages.map((message) => ({
-        ...message,
-        everybodyHasRead: true,
-      }))
-      addMessages(readMessages)
-    }
-  }
-
-  const hasOlderMessages = () => {
-    return messages.length > 9 && messages.length < totalMessages
-  }
-
-  return {
-    addMessages,
-    messages,
-    incrementMessages,
-    updateMesssagesAsRead,
-    addTotalMessages,
-    hasOlderMessages,
-  }
-}
+import { useState } from 'react'
+import { IMessages, ISocketMessage } from 'types'
+
+export const useMessages = () => {
+  const [messages, setMessages] = useState<IMessages[]>([])
+  const [totalMessages, setTotalMessages] = useState<number>(0)
+
+  const addMessages = (messages: IMessages[]) => {
+    setMessages(messages)
+  }
+  const addTotalMessages = (total: number) => {
+    setTotalMessages(total)
+  }
+
+  const incrementMessages = (ticket: ISocketMessage, currentChatId: string) => {
+    const existentMessage = messages.find(
+      (item) => item.messagecode === ticket.message.messagecode
+    )
+    if (ticket.message.ticketId === currentChatId && !existentMessage) {
+      addMessages([...messages, ticket.message])
+    }
+  }
+
+  const updateMesssagesAsRead = (
+    ticket: ISocketMessage,
+    currentChatId: string
+  ) => {
+    if (ticket.markAsRead || currentChatId === ticket?.message?.ticketId) {
+      const readMessages = messages.map((message) => ({
+        ...message,
+        everybodyHasRead: true,
+      }))
+      addMessages(readMessages)
+    }
+  }
+
+  const hasOlderMessages = () => {
+    return messages.length > 9 && messages.length < totalMessages
+  }
+
+  return {
+    addMessages,
+    messages,
+    incrementMessages,
+    updateMesssagesAsRead,
+    addTotalMessages,
+    hasOlderMessages,
+  }
+}

package/src/app/Messenger/hooks/useThemes.tsx

@@ -1,14 +1,14 @@
-import { useContext } from 'react'
-import { MessageThemeContext } from '../components/MessengerThemeWrapper/MessengerThemeWrapper'
-
-const useTheme = () => {
-  const context = useContext(MessageThemeContext)
-
-  if (context === undefined) {
-    throw new Error('useTheme must be used within a ThemeProvider')
-  }
-
-  return context
-}
-
-export default useTheme
+import { useContext } from 'react'
+import { MessageThemeContext } from '../components/MessengerThemeWrapper/MessengerThemeWrapper'
+
+const useTheme = () => {
+  const context = useContext(MessageThemeContext)
+
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+
+  return context
+}
+
+export default useTheme