feat: webhooks

mobile/src/types/Raven/RavenUser.ts

@@ -10,13 +10,18 @@ export interface RavenUser {
 	parentfield?: string
 	parenttype?: string
 	idx?: number
+	/**	Type : Select	*/
+	type: "User" | "Bot"
 	/**	User : Link - User	*/
-	user: string
+	user?: string
+	/**	Bot : Link - Raven Bot	*/
+	bot?: string
 	/**	Full Name : Data	*/
-	full_name: string
+	full_name?: string
 	/**	First Name : Data	*/
 	first_name?: string
 	/**	User Image : Attach Image	*/
-	user_image?: string,
-	enabled: 0 | 1
+	user_image?: string
+	/**	Enabled : Check	*/
+	enabled?: 0 | 1
 }

mobile/src/types/RavenBot/RavenBot.ts

@@ -0,0 +1,25 @@
+
+export interface RavenBot{
+	creation: string
+	name: string
+	modified: string
+	owner: string
+	modified_by: string
+	docstatus: 0 | 1 | 2
+	parent?: string
+	parentfield?: string
+	parenttype?: string
+	idx?: number
+	/**	Bot Name : Data	*/
+	bot_name?: string
+	/**	Description : Data	*/
+	description?: string
+	/**	Image : Attach Image	*/
+	image?: string
+	/**	Enabled : Check	*/
+	enabled?: 0 | 1
+	/**	Is Standard : Check	*/
+	is_standard?: 0 | 1
+	/**	Module : Link - Module Def	*/
+	module?: string
+}

mobile/src/types/RavenMessaging/RavenMessage.ts

@@ -47,6 +47,12 @@ export interface RavenMessage {
 	link_document?: string
 	/**	Is Edited : Check	*/
 	is_edited?: 0 | 1
+	/**	Is Bot Message : Check	*/
+	is_bot_message?: 0 | 1
+	/**	Bot : Link - Raven User	*/
+	bot?: string
+	/**	Content : Long Text	*/
+	content?: string
 	/**	Mentions : Table - Raven Mention	*/
 	mentions?: RavenMention[]
 }

raven-app/src/App.tsx

@@ -1,5 +1,5 @@
 import { FrappeProvider } from 'frappe-react-sdk'
-import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
+import { Outlet, Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'
 import { MainPage } from './pages/MainPage'
 import { ProtectedRoute } from './utils/auth/ProtectedRoute'
 import { UserProvider } from './utils/auth/UserProvider'
@@ -9,7 +9,10 @@ import { ThemeProvider } from './ThemeProvider'
 import { Toaster } from './components/common/Toast/Toaster'
 import { FullPageLoader } from './components/layout/Loaders'
 import { useStickyState } from './hooks/useStickyState'
-
+import { Settings } from './pages/settings/Settings'
+import { CreateWebhook } from './components/feature/integrations/webhooks/CreateWebhook'
+import ViewWebhook from './components/feature/integrations/webhooks/ViewWebhook'
+import { WebhookList } from './components/feature/integrations/webhooks/WebhookList'
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -18,11 +21,19 @@ const router = createBrowserRouter(
       <Route path='/login-with-email' lazy={() => import('@/pages/auth/LoginWithEmail')} />
       <Route path='/signup' lazy={() => import('@/pages/auth/SignUp')} />
       <Route path="/" element={<ProtectedRoute />}>
-        <Route index element={<ChannelRedirect />} />
-        <Route path="channel" element={<MainPage />} >
-          <Route index element={<ChannelRedirect />} />
-          <Route path="saved-messages" lazy={() => import('./components/feature/saved-messages/SavedMessages')} />
-          <Route path=":channelID" lazy={() => import('@/pages/ChatSpace')} />
+        <Route path="/" element={<ChannelRedirect />}>
+          <Route path="channel" element={<MainPage />} >
+            <Route index element={<ChannelRedirect />} />
+            <Route path="saved-messages" lazy={() => import('./components/feature/saved-messages/SavedMessages')} />
+            <Route path=":channelID" lazy={() => import('@/pages/ChatSpace')} />
+          </Route>
+          <Route path='settings' element={<Settings />}>
+            <Route path='integrations'>
+              <Route path='webhooks' element={<WebhookList />} />
+              <Route path='webhooks/create' element={<CreateWebhook />} />
+              <Route path='webhooks/:ID' element={<ViewWebhook />} />
+            </Route>
+          </Route>
         </Route>
       </Route>
     </>

raven-app/src/components/feature/integrations/webhooks/CreateWebhook.tsx

@@ -0,0 +1,91 @@
+import { Webhook } from '@/types/Integrations/Webhook'
+import { useFrappeCreateDoc } from 'frappe-react-sdk'
+import { FormProvider, useForm } from 'react-hook-form'
+import { useNavigate } from 'react-router-dom'
+import { Button, Flex, Separator, Text } from '@radix-ui/themes'
+import { BiChevronLeft } from 'react-icons/bi'
+import { ErrorBanner } from '@/components/layout/AlertBanner'
+import { WebhookForm } from './WebhookForm'
+import { useToast } from '@/hooks/useToast'
+import { RavenWebhook } from '@/types/RavenIntegrations/RavenWebhook'
+
+export const CreateWebhook = () => {
+
+    const navigate = useNavigate()
+
+    const methods = useForm<RavenWebhook>({
+        defaultValues: {
+            enabled: 1,
+            timeout: 5
+        }
+    })
+    const { createDoc, loading, reset, error } = useFrappeCreateDoc()
+
+    const { toast } = useToast()
+
+    const onSubmit = (data: RavenWebhook) => {
+        createDoc('Raven Webhook', data)
+            .then((doc) => {
+                reset()
+                methods.reset()
+                toast({
+                    title: "Webhook created successfully.",
+                    variant: 'success',
+                })
+                return doc
+            }).then((doc) => {
+                navigate(`../webhooks/${doc.name}`)
+            })
+    }
+
+    return (
+        <Flex direction='column' gap='4' py='4' width={'100%'} height={'100%'} style={{
+            alignItems: 'center',
+            justifyContent: 'start',
+            minHeight: '100vh'
+        }}>
+            <Flex direction='column' gap='4' pt={'4'} width='100%' style={{
+                maxWidth: '700px'
+            }} >
+                <BackToList />
+                <Flex direction='column' gap='4' width='100%' px={'2'}>
+                    <header>
+                        <Text size='6' weight='bold'>Create Webhook</Text>
+                    </header>
+                    <Separator size='4' className={`bg-gray-4 dark:bg-gray-6`} />
+                    <ErrorBanner error={error} />
+                    <FormProvider {...methods}>
+                        <form onSubmit={methods.handleSubmit(onSubmit)}>
+                            <WebhookForm />
+                        </form>
+                    </FormProvider>
+                    <Button onClick={methods.handleSubmit(onSubmit)} disabled={loading} variant='solid' style={{
+                        alignSelf: 'flex-end'
+                    }} >
+                        Create Webhook
+                    </Button>
+                </Flex>
+            </Flex>
+        </Flex>
+
+    )
+}
+
+export const BackToList = () => {
+
+    const navigate = useNavigate()
+
+    return (
+        <header>
+            <Flex
+                align='center'
+                gap={'1'}
+                className="cursor-pointer"
+                onClick={() => navigate('/settings/integrations/webhooks')}
+            >
+                <BiChevronLeft size={'18px'} color="gray" />
+                <Text as='span' size='1' weight={'medium'}>Back to the list</Text>
+            </Flex>
+        </header>
+    )
+}

raven-app/src/components/feature/integrations/webhooks/ViewWebhook.tsx

@@ -0,0 +1,162 @@
+import { ErrorBanner } from "@/components/layout/AlertBanner"
+import { FullPageLoader } from "@/components/layout/Loaders"
+import { AlertDialog, Badge, Box, Button, DropdownMenu, Flex, IconButton, Separator, Text } from "@radix-ui/themes"
+import { FrappeDoc, useFrappeGetDoc, useFrappeUpdateDoc } from "frappe-react-sdk"
+import { FieldValues, FormProvider, useForm } from "react-hook-form"
+import { useParams } from "react-router-dom"
+import { KeyedMutator } from 'swr'
+import { BackToList } from "./CreateWebhook"
+import { WebhookForm } from "./WebhookForm"
+import { useToast } from "@/hooks/useToast"
+import { BiDotsVerticalRounded } from "react-icons/bi"
+import { useState } from "react"
+import { DIALOG_CONTENT_CLASS } from "@/utils/layout/dialog"
+import { Loader } from "@/components/common/Loader"
+import { RavenWebhook } from "@/types/RavenIntegrations/RavenWebhook"
+
+const ViewWebhook = () => {
+
+    const { ID } = useParams<{ ID: string }>()
+    const { data, error, isLoading, mutate } = useFrappeGetDoc<RavenWebhook>('Raven Webhook', ID, undefined, {
+        shouldRetryOnError: false,
+    })
+
+    return (
+        <Box className='p-4'>
+            {isLoading && <FullPageLoader />}
+            {error && <ErrorBanner error={error} />}
+            {data && <ViewWebhookPage data={data} mutate={mutate} />}
+
+        </Box>
+    )
+}
+
+export default ViewWebhook
+ViewWebhook.displayName = 'ViewWebhook'
+
+export const ViewWebhookPage = ({ data, mutate }: { data: FrappeDoc<RavenWebhook>, mutate: KeyedMutator<FrappeDoc<RavenWebhook>> }) => {
+
+    const methods = useForm<RavenWebhook>({
+        defaultValues: {
+            ...data,
+            docstatus: data.docstatus
+        }
+    })
+
+    const { updateDoc, loading, reset, error } = useFrappeUpdateDoc()
+
+    const { toast } = useToast()
+
+    const isDirty = methods.formState.isDirty
+
+    const onSubmit = async (data: FieldValues) => {
+        return updateDoc('Raven Webhook', data.name, data)
+            .then((doc) => {
+                toast({
+                    title: "Webhook updated successfully.",
+                    variant: 'success',
+                })
+                reset()
+                mutate()
+                if (doc) {
+                    methods.reset({
+                        ...doc,
+                        docstatus: doc.docstatus
+                    })
+                }
+            })
+    }
+
+    const [open, setOpen] = useState(false)
+    const onClose = () => {
+        setOpen(false)
+    }
+
+    const onUpdateEnabled = () => {
+        updateDoc('Raven Webhook', data.name, {
+            enabled: !data.enabled
+        }).then((doc) => {
+            toast({
+                title: "Webhook updated successfully.",
+                variant: 'success',
+            })
+            reset()
+            mutate()
+        })
+    }
+
+    return (
+        <Flex direction='column' gap='4' py='4' width={'100%'} height={'100%'} style={{
+            alignItems: 'center',
+            justifyContent: 'start',
+            minHeight: '100vh'
+        }}>
+            <Flex direction='column' gap='4' pt={'4'} width='100%' style={{
+                maxWidth: '700px'
+            }} >
+                <BackToList />
+                <Flex direction='column' gap='4' width='100%' px={'2'}>
+                    <Flex direction={'row'} gap={'2'} justify={'between'} align={'center'}>
+                        <Flex direction={'row'} gap={'2'} align={'center'}>
+                            <Text size='6' weight='bold'>{data?.name}</Text>
+                            <Badge color={data.enabled ? 'green' : 'red'}>{data.enabled ? 'Enabled' : 'Disabled'}</Badge>
+                        </Flex>
+                        <DropdownMenu.Root>
+                            <DropdownMenu.Trigger>
+                                <IconButton aria-label='Options' color='gray' variant='ghost' style={{
+                                    // @ts-ignore
+                                    '--icon-button-ghost-padding': '0',
+                                    height: 'var(--base-button-height)',
+                                    width: 'var(--base-button-height)',
+                                }}>
+                                    <BiDotsVerticalRounded />
+                                </IconButton>
+                            </DropdownMenu.Trigger>
+                            <DropdownMenu.Content variant='soft'>
+                                <DropdownMenu.Item color='gray' onClick={() => setOpen(true)} className="cursor-pointer">
+                                    {data.enabled ? 'Disable' : 'Enable'} Webhook
+                                </DropdownMenu.Item>
+                            </DropdownMenu.Content>
+                        </DropdownMenu.Root>
+                    </Flex>
+                    <Separator size='4' className={`bg-gray-4 dark:bg-gray-6`} />
+                    <ErrorBanner error={error} />
+                    <FormProvider {...methods}>
+                        <form onSubmit={methods.handleSubmit(onSubmit)}>
+                            <WebhookForm isEdit={true} />
+                        </form>
+                    </FormProvider>
+                    <Button onClick={methods.handleSubmit(onSubmit)} disabled={loading || !isDirty} variant='solid' style={{
+                        alignSelf: 'flex-end'
+                    }}>
+                        Save Webhook
+                    </Button>
+                </Flex>
+            </Flex>
+            <AlertDialog.Root open={open} onOpenChange={setOpen}>
+                <AlertDialog.Content className={DIALOG_CONTENT_CLASS}>
+                    <AlertDialog.Title>
+                        <Text>{data.enabled ? 'Disable' : 'Enable'} Webhook</Text>
+                    </AlertDialog.Title>
+                    <Flex direction={'column'} gap='2'>
+                        <ErrorBanner error={error} />
+                        <Text size='2'>Are you sure you want to {data.enabled ? 'disable' : 'enable'} this webhook?</Text>
+                    </Flex>
+                    <Flex gap="3" mt="4" justify="end">
+                        <AlertDialog.Cancel>
+                            <Button variant="soft" color="gray" onClick={onClose}>
+                                Cancel
+                            </Button>
+                        </AlertDialog.Cancel>
+                        <AlertDialog.Action>
+                            <Button variant="solid" color="green" onClick={onUpdateEnabled} disabled={loading}>
+                                {loading && <Loader />}
+                                {loading ? "Updating" : data.enabled ? "Disable" : "Enable"}
+                            </Button>
+                        </AlertDialog.Action>
+                    </Flex>
+                </AlertDialog.Content>
+            </AlertDialog.Root>
+        </Flex >
+    )
+}