Merge pull request #1025 from The-Commit-Company/develop

Version 1.6.10

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "raven-ui",
   "private": true,
   "license": "AGPL-3.0-only",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/common/LinkField/LinkField.tsx

@@ -16,11 +16,13 @@ export interface LinkFieldProps {
     value: string,
     setValue: (value: string) => void,
     disabled?: boolean,
-    autofocus?: boolean
+    autofocus?: boolean,
+    dropdownClass?: string,
+    required?: boolean,
 }
 
 
-const LinkField = ({ doctype, filters, label, placeholder, value, setValue, disabled, autofocus }: LinkFieldProps) => {
+const LinkField = ({ doctype, filters, label, placeholder, value, required, setValue, disabled, autofocus, dropdownClass }: LinkFieldProps) => {
 
     const [searchText, setSearchText] = useState('')
 
@@ -53,9 +55,11 @@ const LinkField = ({ doctype, filters, label, placeholder, value, setValue, disa
         },
     })
 
+    console.log(isOpen)
+
     return <div className="w-full">
-        <div className="flex flex-col gap-1">
-            <Label className="w-fit" {...getLabelProps()}>
+        <div className="flex flex-col">
+            <Label className="w-fit" isRequired={required} {...getLabelProps()}>
                 {label}
             </Label>
             <TextField.Root
@@ -68,9 +72,15 @@ const LinkField = ({ doctype, filters, label, placeholder, value, setValue, disa
 
             </TextField.Root>
         </div>
+        {isOpen && !items.length && (
+            <div
+                className={clsx(`p-2 sm:w-[550px] w-[24rem] absolute bg-background rounded-b-md mt-1 shadow-md z-[9999] max-h-96 overflow-scroll`, dropdownClass)}>
+                <Text as='span' size='2' color='gray'>No results found</Text>
+            </div>
+        )}
         <ul
-            className={`sm:w-[550px] w-[24rem] absolute bg-background rounded-b-md mt-1 shadow-md z-[9999] max-h-96 overflow-scroll p-0 ${!(isOpen && items.length) && 'hidden'
-                }`}
+            className={clsx(`sm:w-[550px] w-[24rem] absolute bg-background rounded-b-md mt-1 shadow-md z-[9999] max-h-96 overflow-scroll p-0 ${!(isOpen && items.length) && 'hidden'
+                }`, dropdownClass)}
             {...getMenuProps()}
         >
             {isOpen &&

frontend/src/components/feature/chat-header/ChannelHeaderMenu.tsx

@@ -1,6 +1,6 @@
 import { useBoolean } from '@/hooks/useBoolean'
 import { DropdownMenu, Flex, IconButton } from '@radix-ui/themes'
-import { BiDotsVerticalRounded, BiFile, BiSearch, BiUserPlus } from 'react-icons/bi'
+import { BiDotsVerticalRounded, BiFile, BiSearch, BiVideoPlus } from 'react-icons/bi'
 import { ViewFilesButton } from '../files/ViewFilesButton'
 import AddChannelMembersModal from '../channel-member-details/add-members/AddChannelMembersModal'
 import { useParams } from 'react-router-dom'
@@ -12,6 +12,7 @@ import { UserContext } from '@/utils/auth/UserProvider'
 import ViewChannelDetailsModal from '../channels/ViewChannelDetailsModal'
 import { SlSettings } from 'react-icons/sl'
 import { TbUsersPlus } from 'react-icons/tb'
+import CreateMeetingDialog from '../integrations/meetings/CreateMeetingDialog'
 
 type Props = {
     channelData: ChannelListItem,
@@ -30,6 +31,7 @@ const ChannelHeaderMenu = ({ channelData }: Props) => {
     const [isAddMembersOpen, { on: onAddMembersOpen }, onAddMembersChange] = useBoolean(false)
     const [isGlobalSearchModalOpen, { on: onGlobalSearchModalOpen, off: onGlobalSearchModalClose }] = useBoolean(false)
     const [isChannelDetailsOpen, { on: onChannelDetailsOpen }, onChannelDetailsChange] = useBoolean(false)
+    const [isMeetingModalOpen, { on: onMeetingModalOpen }, onMeetingModalChange] = useBoolean(false)
 
     const canAddMembers = useMemo(() => {
         if (channelData.type === 'Open') return false
@@ -48,6 +50,12 @@ const ChannelHeaderMenu = ({ channelData }: Props) => {
                 </IconButton>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content className='min-w-48'>
+                <DropdownMenu.Item onClick={onMeetingModalOpen}>
+                    <Flex gap='2' align='center'>
+                        <BiVideoPlus size={ICON_SIZE} />
+                        Start a Meeting
+                    </Flex>
+                </DropdownMenu.Item>
                 <DropdownMenu.Item onClick={onGlobalSearchModalOpen}>
                     <Flex gap='2' align='center'>
                         <BiSearch size={ICON_SIZE} />
@@ -101,6 +109,12 @@ const ChannelHeaderMenu = ({ channelData }: Props) => {
                 setOpen={onChannelDetailsChange}
                 channelData={channelData}
             />
+
+            <CreateMeetingDialog
+                isOpen={isMeetingModalOpen}
+                setOpen={onMeetingModalChange}
+                channelData={channelData}
+            />
         </>
     )
 }

frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Link.tsx

@@ -93,58 +93,59 @@ export const LinkPreview = memo(({ messageID }: { messageID: string }) => {
         })
     }
 
-    if (!href) return null
-
     const linkPreview = data?.message?.[0]
 
-    return <Box py='2'>
-        {linkPreview ? linkPreview.site_name && linkPreview.description ? <Flex className='gap-2 sm:gap-4 sm:flex-start items-center' width='100%'>
-            {(linkPreview.absolute_image || linkPreview.image) &&
-                <a href={href} target='_blank'>
-                    <Box className='relative w-18 min-w-20 min-h-12 h-12 sm:min-w-64 sm:min-h-32 sm:w-64 sm:h-32'>
-                        {/* Absolute positioned skeleton loader */}
-                        <Box className='absolute top-0 z-0 left-0 w-20 h-12 sm:w-64 sm:h-32' >
-                            <Box className='animate-pulse bg-gray-3 z-0 w-20 h-12 sm:w-64 sm:h-32 dark:bg-gray-5 rounded-md'>
+    if (!href || !linkPreview) return null
+
+    if (linkPreview && linkPreview.site_name && linkPreview.description) {
+        return <Box py='2'>
+            <Flex className='gap-2 sm:gap-4 sm:flex-start items-center' width='100%'>
+                {(linkPreview.absolute_image || linkPreview.image) &&
+                    <a href={href} target='_blank'>
+                        <Box className='relative w-18 min-w-20 min-h-12 h-12 sm:min-w-64 sm:min-h-32 sm:w-64 sm:h-32'>
+                            {/* Absolute positioned skeleton loader */}
+                            <Box className='absolute top-0 z-0 left-0 w-20 h-12 sm:w-64 sm:h-32' >
+                                <Box className='animate-pulse bg-gray-3 z-0 w-20 h-12 sm:w-64 sm:h-32 dark:bg-gray-5 rounded-md'>
 
+                                </Box>
                             </Box>
+                            <img
+                                width='100%'
+                                className='absolute object-cover min-w-20 sm:min-w-64 min-h-12 sm:min-h-32 w-20 sm:w-64 h-12 sm:h-32 rounded-md z-50 top-0 left-0'
+                                src={linkPreview.absolute_image || linkPreview.image}
+                                alt={linkPreview.title} />
                         </Box>
-                        <img
-                            width='100%'
-                            className='absolute object-cover min-w-20 sm:min-w-64 min-h-12 sm:min-h-32 w-20 sm:w-64 h-12 sm:h-32 rounded-md z-50 top-0 left-0'
-                            src={linkPreview.absolute_image || linkPreview.image}
-                            alt={linkPreview.title} />
-                    </Box>
-                </a>
-            }
-            <Flex className='group sm:pr-2 sm:gap-2 gap-0' width='100%'>
-                <a href={href} target='_blank' className='block w-full'>
-
-                    <Flex direction='column' gap='1' className='sm:py-1'>
-                        <Flex gap='1' className='sm:flex-col flex-col-reverse'>
-                            <Text as='span' weight='bold' className='sm:text-base text-xs'>{linkPreview.title}</Text>
-                            <Text as='span' color='gray' weight='medium' className='sm:text-md text-xs'>{linkPreview.site_name}</Text>
+                    </a>
+                }
+                <Flex className='group sm:pr-2 sm:gap-2 gap-0' width='100%'>
+                    <a href={href} target='_blank' className='block w-full'>
+
+                        <Flex direction='column' gap='1' className='sm:py-1'>
+                            <Flex gap='1' className='sm:flex-col flex-col-reverse'>
+                                <Text as='span' weight='bold' className='sm:text-base text-xs'>{linkPreview.title}</Text>
+                                <Text as='span' color='gray' weight='medium' className='sm:text-md text-xs'>{linkPreview.site_name}</Text>
+                            </Flex>
+                            <Text as='p' size='1' className='whitespace-break-spaces sm:block hidden'>{linkPreview.description}</Text>
                         </Flex>
-                        <Text as='p' size='1' className='whitespace-break-spaces sm:block hidden'>{linkPreview.description}</Text>
-                    </Flex>
-                </a>
-                <div className='group-hover:visible invisible sm:block hidden'>
-                    <Tooltip content='Hide link preview'>
-                        <IconButton size='1'
-                            color='gray'
-                            className='cursor-pointer'
-                            aria-label='Hide link preview'
-                            variant='soft'
-                            onClick={hidePreviewLink}
-                        >
-                            <BiX size='20' />
-                        </IconButton>
-                    </Tooltip>
-                </div>
+                    </a>
+                    <div className='group-hover:visible invisible sm:block hidden'>
+                        <Tooltip content='Hide link preview'>
+                            <IconButton size='1'
+                                color='gray'
+                                className='cursor-pointer'
+                                aria-label='Hide link preview'
+                                variant='soft'
+                                onClick={hidePreviewLink}
+                            >
+                                <BiX size='20' />
+                            </IconButton>
+                        </Tooltip>
+                    </div>
+                </Flex>
             </Flex>
-        </Flex> : null :
+        </Box>
+    }
 
-            null
-        }
-    </Box>
+    return null
 
 })

frontend/src/components/feature/chat/ChatStream/useChatStream.ts

@@ -72,7 +72,7 @@ const useChatStream = (scrollRef: MutableRefObject<HTMLDivElement | null>) => {
         'channel_id': channelID,
         'base_message': state?.baseMessage ? state.baseMessage : undefined
     }, { path: `get_messages_for_channel_${channelID}`, baseMessage: state?.baseMessage }, {
-        revalidateOnFocus: false,
+        revalidateOnFocus: true,
         onSuccess: (data) => {
             if (!highlightedMessage) {
                 if (!data.message.has_new_messages) {

frontend/src/components/feature/integrations/meetings/CreateMeetingDialog.tsx

@@ -0,0 +1,44 @@
+import { Drawer, DrawerContent } from '@/components/layout/Drawer'
+import { useIsDesktop } from '@/hooks/useMediaQuery'
+import { ChannelListItem } from '@/utils/channel/ChannelListProvider'
+import { DIALOG_CONTENT_CLASS } from '@/utils/layout/dialog'
+import { Dialog } from '@radix-ui/themes'
+import CreateMeetingForm from './CreateMeetingForm'
+
+interface CreateMeetingDialogProps {
+    isOpen: boolean,
+    setOpen: (open: boolean) => void
+    channelData: ChannelListItem
+}
+
+const CreateMeetingDialog = ({ isOpen, setOpen, channelData }: CreateMeetingDialogProps) => {
+
+
+    const isDesktop = useIsDesktop()
+
+    if (isDesktop) {
+        return (
+            <Dialog.Root open={isOpen} onOpenChange={setOpen}>
+                <Dialog.Content className={DIALOG_CONTENT_CLASS}>
+                    <CreateMeetingForm
+                        channelData={channelData}
+                        onClose={() => setOpen(false)}
+                    />
+                </Dialog.Content>
+            </Dialog.Root>
+        )
+    } else {
+        return <Drawer open={isOpen} onOpenChange={setOpen}>
+            <DrawerContent>
+                <div className='pb-16 min-h-48 px-1 overflow-auto'>
+                    <CreateMeetingForm
+                        channelData={channelData}
+                        onClose={() => setOpen(false)}
+                    />
+                </div>
+            </DrawerContent>
+        </Drawer>
+    }
+}
+
+export default CreateMeetingDialog