agx-chat-web 1.2.0 → 1.2.2

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

package/src/app/Messenger/icons/AttachFileIcon.tsx

@@ -1,20 +1,20 @@
-import React from 'react'
-import useTheme from '../hooks/useThemes'
-
-export default function AttachFileIcon ({ ...rest }) {
-  const { theme } = useTheme()
-  return (
-    <svg
-      width='26'
-      height='28'
-      viewBox='0 0 26 28'
-      xmlns='http://www.w3.org/2000/svg'
-      {...rest}
-    >
-      <path
-        d='M22.5464 2.73571C19.1821 -0.628572 13.7036 -0.628572 10.3429 2.73571L1.02143 12.05C0.960715 12.1107 0.928572 12.1929 0.928572 12.2786C0.928572 12.3643 0.960715 12.4464 1.02143 12.5071L2.33929 13.825C2.39953 13.885 2.48107 13.9186 2.56607 13.9186C2.65108 13.9186 2.73262 13.885 2.79286 13.825L12.1143 4.51071C13.2714 3.35357 14.8107 2.71786 16.4464 2.71786C18.0821 2.71786 19.6214 3.35357 20.775 4.51071C21.9321 5.66786 22.5679 7.20714 22.5679 8.83929C22.5679 10.475 21.9321 12.0107 20.775 13.1679L11.275 22.6643L9.73572 24.2036C8.29643 25.6429 5.95714 25.6429 4.51786 24.2036C3.82143 23.5071 3.43929 22.5821 3.43929 21.5964C3.43929 20.6107 3.82143 19.6857 4.51786 18.9893L13.9429 9.56786C14.1821 9.33214 14.4964 9.2 14.8321 9.2H14.8357C15.1714 9.2 15.4821 9.33214 15.7179 9.56786C15.9571 9.80714 16.0857 10.1214 16.0857 10.4571C16.0857 10.7893 15.9536 11.1036 15.7179 11.3393L8.01429 19.0357C7.95357 19.0964 7.92143 19.1786 7.92143 19.2643C7.92143 19.35 7.95357 19.4321 8.01429 19.4929L9.33214 20.8107C9.39238 20.8707 9.47393 20.9044 9.55893 20.9044C9.64393 20.9044 9.72548 20.8707 9.78572 20.8107L17.4857 13.1107C18.1964 12.4 18.5857 11.4571 18.5857 10.4536C18.5857 9.45 18.1929 8.50357 17.4857 7.79643C16.0179 6.32857 13.6321 6.33214 12.1643 7.79643L11.25 8.71429L2.74286 17.2179C2.16547 17.7919 1.70778 18.4748 1.39634 19.227C1.0849 19.9793 0.925905 20.7858 0.928572 21.6C0.928572 23.2536 1.575 24.8071 2.74286 25.975C3.95357 27.1821 5.53929 27.7857 7.125 27.7857C8.71072 27.7857 10.2964 27.1821 11.5036 25.975L22.5464 14.9393C24.1714 13.3107 25.0714 11.1429 25.0714 8.83929C25.075 6.53214 24.175 4.36429 22.5464 2.73571Z'
-        fill={theme.uploadFileIconColor}
-      />
-    </svg>
-  )
-}
+import React from 'react'
+import useTheme from '../hooks/useThemes'
+
+export default function AttachFileIcon ({ ...rest }) {
+  const { theme } = useTheme()
+  return (
+    <svg
+      width='26'
+      height='28'
+      viewBox='0 0 26 28'
+      xmlns='http://www.w3.org/2000/svg'
+      {...rest}
+    >
+      <path
+        d='M22.5464 2.73571C19.1821 -0.628572 13.7036 -0.628572 10.3429 2.73571L1.02143 12.05C0.960715 12.1107 0.928572 12.1929 0.928572 12.2786C0.928572 12.3643 0.960715 12.4464 1.02143 12.5071L2.33929 13.825C2.39953 13.885 2.48107 13.9186 2.56607 13.9186C2.65108 13.9186 2.73262 13.885 2.79286 13.825L12.1143 4.51071C13.2714 3.35357 14.8107 2.71786 16.4464 2.71786C18.0821 2.71786 19.6214 3.35357 20.775 4.51071C21.9321 5.66786 22.5679 7.20714 22.5679 8.83929C22.5679 10.475 21.9321 12.0107 20.775 13.1679L11.275 22.6643L9.73572 24.2036C8.29643 25.6429 5.95714 25.6429 4.51786 24.2036C3.82143 23.5071 3.43929 22.5821 3.43929 21.5964C3.43929 20.6107 3.82143 19.6857 4.51786 18.9893L13.9429 9.56786C14.1821 9.33214 14.4964 9.2 14.8321 9.2H14.8357C15.1714 9.2 15.4821 9.33214 15.7179 9.56786C15.9571 9.80714 16.0857 10.1214 16.0857 10.4571C16.0857 10.7893 15.9536 11.1036 15.7179 11.3393L8.01429 19.0357C7.95357 19.0964 7.92143 19.1786 7.92143 19.2643C7.92143 19.35 7.95357 19.4321 8.01429 19.4929L9.33214 20.8107C9.39238 20.8707 9.47393 20.9044 9.55893 20.9044C9.64393 20.9044 9.72548 20.8707 9.78572 20.8107L17.4857 13.1107C18.1964 12.4 18.5857 11.4571 18.5857 10.4536C18.5857 9.45 18.1929 8.50357 17.4857 7.79643C16.0179 6.32857 13.6321 6.33214 12.1643 7.79643L11.25 8.71429L2.74286 17.2179C2.16547 17.7919 1.70778 18.4748 1.39634 19.227C1.0849 19.9793 0.925905 20.7858 0.928572 21.6C0.928572 23.2536 1.575 24.8071 2.74286 25.975C3.95357 27.1821 5.53929 27.7857 7.125 27.7857C8.71072 27.7857 10.2964 27.1821 11.5036 25.975L22.5464 14.9393C24.1714 13.3107 25.0714 11.1429 25.0714 8.83929C25.075 6.53214 24.175 4.36429 22.5464 2.73571Z'
+        fill={theme.uploadFileIconColor}
+      />
+    </svg>
+  )
+}

package/src/app/Messenger/icons/CSVFileIcon.tsx

@@ -1,26 +1,26 @@
-import * as React from 'react'
-import { SVGProps } from 'react'
-
-const CSVFileIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns='http://www.w3.org/2000/svg'
-    width={40}
-    height={40}
-    viewBox='0 0 32 32'
-    {...props}
-  >
-    <rect width='32' height='32' rx='5' fill='#21A366' />
-    <text
-      x='16'
-      y='22'
-      textAnchor='middle'
-      fontSize='12'
-      fill='#fff'
-      fontWeight='bold'
-    >
-      CSV
-    </text>
-  </svg>
-)
-
-export default CSVFileIcon
+import * as React from 'react'
+import { SVGProps } from 'react'
+
+const CSVFileIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={40}
+    height={40}
+    viewBox='0 0 32 32'
+    {...props}
+  >
+    <rect width='32' height='32' rx='5' fill='#21A366' />
+    <text
+      x='16'
+      y='22'
+      textAnchor='middle'
+      fontSize='12'
+      fill='#fff'
+      fontWeight='bold'
+    >
+      CSV
+    </text>
+  </svg>
+)
+
+export default CSVFileIcon

package/src/app/Messenger/icons/CloseIcon.tsx

@@ -1,20 +1,20 @@
-import React from 'react'
-import useTheme from '../hooks/useThemes'
-
-export default function CloseIcon () {
-  const { theme } = useTheme()
-  return (
-    <svg
-      width='21'
-      height='21'
-      viewBox='0 0 21 21'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-    >
-      <path
-        d='M13.4519 10.9583L20.435 3.9751C20.7664 3.64426 20.9529 3.19532 20.9533 2.72704C20.9537 2.25875 20.7681 1.80949 20.4372 1.47807C20.1064 1.14665 19.6574 0.960225 19.1892 0.959812C18.7209 0.959398 18.2716 1.14503 17.9402 1.47586L10.957 8.45902L3.97388 1.47586C3.64246 1.14444 3.19296 0.958252 2.72426 0.958252C2.25556 0.958252 1.80606 1.14444 1.47464 1.47586C1.14322 1.80728 0.957031 2.25678 0.957031 2.72548C0.957031 3.19418 1.14322 3.64368 1.47464 3.9751L8.4578 10.9583L1.47464 17.9414C1.14322 18.2728 0.957031 18.7223 0.957031 19.191C0.957031 19.6597 1.14322 20.1092 1.47464 20.4406C1.80606 20.7721 2.25556 20.9583 2.72426 20.9583C3.19296 20.9583 3.64246 20.7721 3.97388 20.4406L10.957 13.4575L17.9402 20.4406C18.2716 20.7721 18.7211 20.9583 19.1898 20.9583C19.6585 20.9583 20.108 20.7721 20.4394 20.4406C20.7708 20.1092 20.957 19.6597 20.957 19.191C20.957 18.7223 20.7708 18.2728 20.4394 17.9414L13.4519 10.9583Z'
-        fill={theme.newChatFormTexts ?? '#476077'}
-      />
-    </svg>
-  )
-}
+import React from 'react'
+import useTheme from '../hooks/useThemes'
+
+export default function CloseIcon () {
+  const { theme } = useTheme()
+  return (
+    <svg
+      width='21'
+      height='21'
+      viewBox='0 0 21 21'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M13.4519 10.9583L20.435 3.9751C20.7664 3.64426 20.9529 3.19532 20.9533 2.72704C20.9537 2.25875 20.7681 1.80949 20.4372 1.47807C20.1064 1.14665 19.6574 0.960225 19.1892 0.959812C18.7209 0.959398 18.2716 1.14503 17.9402 1.47586L10.957 8.45902L3.97388 1.47586C3.64246 1.14444 3.19296 0.958252 2.72426 0.958252C2.25556 0.958252 1.80606 1.14444 1.47464 1.47586C1.14322 1.80728 0.957031 2.25678 0.957031 2.72548C0.957031 3.19418 1.14322 3.64368 1.47464 3.9751L8.4578 10.9583L1.47464 17.9414C1.14322 18.2728 0.957031 18.7223 0.957031 19.191C0.957031 19.6597 1.14322 20.1092 1.47464 20.4406C1.80606 20.7721 2.25556 20.9583 2.72426 20.9583C3.19296 20.9583 3.64246 20.7721 3.97388 20.4406L10.957 13.4575L17.9402 20.4406C18.2716 20.7721 18.7211 20.9583 19.1898 20.9583C19.6585 20.9583 20.108 20.7721 20.4394 20.4406C20.7708 20.1092 20.957 19.6597 20.957 19.191C20.957 18.7223 20.7708 18.2728 20.4394 17.9414L13.4519 10.9583Z'
+        fill={theme.newChatFormTexts ?? '#476077'}
+      />
+    </svg>
+  )
+}

package/src/app/Messenger/icons/DOCFileIcon.tsx

@@ -1,54 +1,54 @@
-import * as React from 'react'
-import { SVGProps } from 'react'
-const FileDoc = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns='http://www.w3.org/2000/svg'
-    xmlnsXlink='http://www.w3.org/1999/xlink'
-    id='Layer_1'
-    width={800}
-    height={800}
-    data-name='Layer 1'
-    viewBox='0 0 32 32'
-    {...props}
-  >
-    <defs>
-      <linearGradient
-        id='doc-gradient'
-        x1={6.65}
-        x2={27.27}
-        y1={6.65}
-        y2={27.27}
-        gradientUnits='userSpaceOnUse'
-      >
-        <stop offset={0} stopColor='#00a6fb' />
-        <stop offset={1} stopColor='#0094ce' />
-      </linearGradient>
-      <linearGradient
-        xlinkHref='#doc-gradient'
-        id='doc-gradient-2'
-        x1={6}
-        x2={12}
-        y1={5}
-        y2={5}
-      />
-      <style>{'.cls-3{fill:#f8edeb}'}</style>
-    </defs>
-    <path
-      d='M23.5 2h-12a.47.47 0 0 0-.35.15l-5 5A.47.47 0 0 0 6 7.5v20A2.5 2.5 0 0 0 8.5 30h15a2.5 2.5 0 0 0 2.5-2.5v-23A2.5 2.5 0 0 0 23.5 2Z'
-      style={{
-        fill: '#00a6fb',
-      }}
-    />
-    <path
-      d='M11.69 2a.47.47 0 0 0-.54.11l-5 5a.47.47 0 0 0-.15.58.5.5 0 0 0 .5.31h3A2.5 2.5 0 0 0 12 5.5v-3a.5.5 0 0 0-.31-.5Z'
-      style={{
-        fill: '#0094ce',
-      }}
-    />
-    <path
-      d='M16 21a2 2 0 0 1-2-2v-6a2 2 0 0 1 4 0v6a2 2 0 0 1-2 2Zm0-9a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1ZM9.5 21a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5 3.5 3.5 0 0 1 3.5 3.5v3A3.5 3.5 0 0 1 9.5 21Zm.5-8.95V20a2.5 2.5 0 0 0 2-2.45v-3a2.5 2.5 0 0 0-2-2.5ZM21 21a2 2 0 0 1-2-2v-6a2 2 0 0 1 4 0 .5.5 0 0 1-1 0 1 1 0 0 0-2 0v6a1 1 0 0 0 2 0 .5.5 0 0 1 1 0 2 2 0 0 1-2 2Z'
-      className='cls-3'
-    />
-  </svg>
-)
-export default FileDoc
+import * as React from 'react'
+import { SVGProps } from 'react'
+const FileDoc = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    xmlnsXlink='http://www.w3.org/1999/xlink'
+    id='Layer_1'
+    width={800}
+    height={800}
+    data-name='Layer 1'
+    viewBox='0 0 32 32'
+    {...props}
+  >
+    <defs>
+      <linearGradient
+        id='doc-gradient'
+        x1={6.65}
+        x2={27.27}
+        y1={6.65}
+        y2={27.27}
+        gradientUnits='userSpaceOnUse'
+      >
+        <stop offset={0} stopColor='#00a6fb' />
+        <stop offset={1} stopColor='#0094ce' />
+      </linearGradient>
+      <linearGradient
+        xlinkHref='#doc-gradient'
+        id='doc-gradient-2'
+        x1={6}
+        x2={12}
+        y1={5}
+        y2={5}
+      />
+      <style>{'.cls-3{fill:#f8edeb}'}</style>
+    </defs>
+    <path
+      d='M23.5 2h-12a.47.47 0 0 0-.35.15l-5 5A.47.47 0 0 0 6 7.5v20A2.5 2.5 0 0 0 8.5 30h15a2.5 2.5 0 0 0 2.5-2.5v-23A2.5 2.5 0 0 0 23.5 2Z'
+      style={{
+        fill: '#00a6fb',
+      }}
+    />
+    <path
+      d='M11.69 2a.47.47 0 0 0-.54.11l-5 5a.47.47 0 0 0-.15.58.5.5 0 0 0 .5.31h3A2.5 2.5 0 0 0 12 5.5v-3a.5.5 0 0 0-.31-.5Z'
+      style={{
+        fill: '#0094ce',
+      }}
+    />
+    <path
+      d='M16 21a2 2 0 0 1-2-2v-6a2 2 0 0 1 4 0v6a2 2 0 0 1-2 2Zm0-9a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1ZM9.5 21a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5 3.5 3.5 0 0 1 3.5 3.5v3A3.5 3.5 0 0 1 9.5 21Zm.5-8.95V20a2.5 2.5 0 0 0 2-2.45v-3a2.5 2.5 0 0 0-2-2.5ZM21 21a2 2 0 0 1-2-2v-6a2 2 0 0 1 4 0 .5.5 0 0 1-1 0 1 1 0 0 0-2 0v6a1 1 0 0 0 2 0 .5.5 0 0 1 1 0 2 2 0 0 1-2 2Z'
+      className='cls-3'
+    />
+  </svg>
+)
+export default FileDoc