From 3e0d422d3d37aa639e50ef4703d4cf7a2de66719 Mon Sep 17 00:00:00 2001
From: pranavmene2000 <menepraanv2000@gmail.com>
Date: Tue, 17 Dec 2024 22:26:25 +0530
Subject: [PATCH 1/6] feat: add help and support gateway

---
 frontend/src/App.tsx                          |   2 +
 .../feature/settings/help/SocketIOHealth.tsx  |  72 ++++++++
 .../feature/settings/help/SupportRequest.tsx  | 161 ++++++++++++++++++
 .../feature/userSettings/SettingsSidebar.tsx  |  15 +-
 .../src/pages/settings/HelpAndSupport.tsx     |  72 ++++++++
 5 files changed, 316 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/feature/settings/help/SocketIOHealth.tsx
 create mode 100644 frontend/src/components/feature/settings/help/SupportRequest.tsx
 create mode 100644 frontend/src/pages/settings/HelpAndSupport.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 210c51fa..ca592689 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -97,6 +97,8 @@ const router = createBrowserRouter(
               <Route path="create" lazy={() => import('./pages/settings/MessageActions/CreateMessageAction')} />
               <Route path=":ID" lazy={() => import('./pages/settings/MessageActions/ViewMessageAction')} />
             </Route>
+
+            <Route path="help" lazy={() => import('./pages/settings/HelpAndSupport')} />
           </Route>
           <Route path=":workspaceID" element={<MainPage />}>
             <Route index element={<MobileTabsPage />} />
diff --git a/frontend/src/components/feature/settings/help/SocketIOHealth.tsx b/frontend/src/components/feature/settings/help/SocketIOHealth.tsx
new file mode 100644
index 00000000..4e1714e2
--- /dev/null
+++ b/frontend/src/components/feature/settings/help/SocketIOHealth.tsx
@@ -0,0 +1,72 @@
+import { ErrorCallout } from "@/components/common/Callouts/ErrorCallouts"
+import SettingsContentContainer from "@/components/layout/Settings/SettingsContentContainer"
+import { Badge, Flex, IconButton, Link, Text } from "@radix-ui/themes"
+import clsx from "clsx"
+import { FrappeConfig, FrappeContext, useFrappeEventListener } from "frappe-react-sdk"
+import { useContext, useEffect, useState } from "react"
+import { LuRefreshCcw } from "react-icons/lu"
+import { TbReportAnalytics } from "react-icons/tb"
+
+const SocketIOHealth = () => {
+
+    const { socket } = useContext(FrappeContext) as FrappeConfig
+
+    const [loading, setLoading] = useState<boolean>(true)
+    const [socketPingTest, setSocketPingTest] = useState('Fail')
+    const [socketTransportMode, setSocketTransportMode] = useState<string | undefined>('')
+
+    useFrappeEventListener('pong', () => {
+        setSocketPingTest('Pass')
+        setLoading(false)
+        setSocketTransportMode(socket?.io.engine.transport.name)
+    })
+
+    const onPingCheck = () => {
+        setLoading(true)
+        socket?.emit('ping')
+        setTimeout(() => {
+            setLoading(false)
+            setSocketTransportMode(s => {
+                if (!s) {
+                    return ''
+                }
+                return s
+            })
+        }, 5000)
+    }
+
+    useEffect(() => {
+        setTimeout(onPingCheck, 5000);
+    }, []);
+
+    return (
+        <SettingsContentContainer>
+            {!loading && socketPingTest === 'Fail' && <ErrorCallout
+                message="Realtime connections are not working on your site. Messages won't be refreshed in real-time."
+            />}
+            <Flex gap="9" align="center">
+                <Flex gap="2" align="center">
+                    <Text size="2" color="gray" as='span' className='font-medium'>Real-time Ping Check:</Text>
+                    <Flex align="center" gap="2">
+                        <Badge color={loading ? 'gray' : socketPingTest === "Pass" ? 'green' : 'red'}>{loading ? 'Loading...' : socketPingTest}</Badge>
+                        {!loading && <IconButton title="Send a ping" aria-label="send a ping" color="gray" size="1" variant="ghost" onClick={onPingCheck}>
+                            <LuRefreshCcw className={clsx(loading ? "animate-spin" : null)} size={12} />
+                        </IconButton>}
+                    </Flex>
+                </Flex>
+
+                {socketTransportMode && <Flex gap="2" align="center">
+                    <Text size="2" color="gray" as='span' className='font-medium'>SocketIO Transport Mode:</Text>
+                    <Badge color="orange">{socketTransportMode}</Badge>
+                </Flex>}
+
+                <Link ml={"auto"} underline="always" size='2' target="_blank"
+                    title="http://localhost:8000/app/system-health-report"
+                    href="http://localhost:8000/app/system-health-report">System Health Report <TbReportAnalytics size='15' />
+                </Link>
+            </Flex>
+        </SettingsContentContainer>
+    )
+}
+
+export default SocketIOHealth
\ No newline at end of file
diff --git a/frontend/src/components/feature/settings/help/SupportRequest.tsx b/frontend/src/components/feature/settings/help/SupportRequest.tsx
new file mode 100644
index 00000000..bd787bbb
--- /dev/null
+++ b/frontend/src/components/feature/settings/help/SupportRequest.tsx
@@ -0,0 +1,161 @@
+import { Box, Button, Dialog, Flex, RadioCards, Text, TextArea, TextField } from "@radix-ui/themes"
+import { useMemo, useState } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { MdOutlineFeedback } from "react-icons/md";
+import { LuBug } from "react-icons/lu"
+import { ErrorText, Label } from "@/components/common/Form"
+import { Loader } from "@/components/common/Loader"
+import { HStack, Stack } from "@/components/layout/Stack"
+import { DIALOG_CONTENT_CLASS } from "@/utils/layout/dialog"
+import useCurrentRavenUser from "@/hooks/useCurrentRavenUser"
+
+type Props = {
+    open: boolean
+    onClose: VoidFunction
+}
+const CreateSupportTicketDialog = ({ open, onClose }: Props) => {
+
+    return (
+        <Dialog.Root open={open} onOpenChange={onClose}>
+            <Dialog.Content maxWidth={'580px'} className={DIALOG_CONTENT_CLASS}>
+                <Dialog.Title mb={'1'}>Help and Support</Dialog.Title>
+                <Dialog.Description size={'2'}>Create a new support request</Dialog.Description>
+                <SupportRequestForm onClose={onClose} />
+            </Dialog.Content>
+        </Dialog.Root>
+    )
+}
+
+interface SupportRequestFormFields {
+    requestType: "feedback" | "bug"
+    email: string
+    description: string
+}
+const SupportRequestForm = ({ onClose }: { onClose: () => void }) => {
+
+    const { myProfile } = useCurrentRavenUser()
+
+    const currentUserEmail = useMemo(() => {
+        const email = myProfile?.name;
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return email && emailRegex.test(email) ? email : "";
+    }, [myProfile]);
+
+    const {
+        control,
+        register,
+        formState: { errors },
+        handleSubmit
+    } = useForm<SupportRequestFormFields>({
+        defaultValues: {
+            requestType: "feedback",
+            email: currentUserEmail
+        }
+    })
+
+    const [loading, setLoading] = useState(false)
+
+    const onSubmit = (data: SupportRequestFormFields) => {
+        setLoading(true)
+
+        // Will send payload to API endpoint later on
+
+        setTimeout(() => {
+            setLoading(false)
+            onClose()
+        }, 1500)
+    }
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <Stack gap="2" pt="3">
+                <Controller
+                    name="requestType"
+                    control={control}
+                    rules={{
+                        required: 'Request type is required',
+                        validate: (value) => ['feedback', 'bug'].includes(value) || 'Invalid request type'
+                    }}
+                    render={({ field: { onChange, value } }) => (
+                        <RadioCards.Root
+                            value={value}
+                            onValueChange={onChange}
+                        >
+                            <RadioCards.Item value="feedback">
+                                <Flex direction="column" width="100%" gap="1">
+                                    <Flex align="center" gap="3">
+                                        <MdOutlineFeedback size="16" />
+                                        <Text weight="bold">Feedback</Text>
+                                    </Flex>
+                                    <Text>We'd love to hear your feedback!</Text>
+                                </Flex>
+                            </RadioCards.Item>
+                            <RadioCards.Item value="bug">
+                                <Flex direction="column" width="100%" gap="1">
+                                    <Flex align="center" gap="3">
+                                        <LuBug size="16" />
+                                        <Text weight="bold">Bug</Text>
+                                    </Flex>
+                                    <Text>Encountered an issue?</Text>
+                                </Flex>
+                            </RadioCards.Item>
+                        </RadioCards.Root>
+                    )}
+                />
+                {errors.requestType && <ErrorText>{errors.requestType.message}</ErrorText>}
+
+                <Stack>
+                    <Box>
+                        <Label htmlFor='email' isRequired>Email</Label>
+                        <TextField.Root
+                            id='email'
+                            {...register('email', {
+                                required: 'Email is required',
+                                pattern: {
+                                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                                    message: "Invalid email address"
+                                }
+                            })}
+                            placeholder="email@example.com"
+                            aria-invalid={errors.email ? 'true' : 'false'}
+                        />
+                    </Box>
+                    {errors.email && <ErrorText>{errors.email?.message}</ErrorText>}
+                </Stack>
+
+                <Stack>
+                    <Box>
+                        <Label htmlFor='description' isRequired>Description</Label>
+                        <TextArea
+                            id='description'
+                            {...register('description', {
+                                required: 'Description is required',
+                                minLength: {
+                                    value: 10,
+                                    message: 'Description must be at least 10 characters'
+                                }
+                            })}
+                            rows={5}
+                            resize='vertical'
+                            placeholder="Please provide detailed information"
+                            aria-invalid={errors.description ? 'true' : 'false'}
+                        />
+                    </Box>
+                    {errors.description && <ErrorText>{errors.description?.message}</ErrorText>}
+                </Stack>
+
+                <HStack justify={'end'} pt='4'>
+                    <Dialog.Close>
+                        <Button color='gray' variant={'soft'} disabled={loading}>Cancel</Button>
+                    </Dialog.Close>
+                    <Button type="submit" disabled={loading} >
+                        {loading ? <Loader className="text-white" /> : null}
+                        Submit
+                    </Button>
+                </HStack>
+            </Stack>
+        </form>
+    );
+}
+
+export default CreateSupportTicketDialog
\ No newline at end of file
diff --git a/frontend/src/components/feature/userSettings/SettingsSidebar.tsx b/frontend/src/components/feature/userSettings/SettingsSidebar.tsx
index f866b53b..5224cf49 100644
--- a/frontend/src/components/feature/userSettings/SettingsSidebar.tsx
+++ b/frontend/src/components/feature/userSettings/SettingsSidebar.tsx
@@ -1,15 +1,15 @@
 import { __ } from '@/utils/translations'
 import { Box, Flex, Separator, Text } from '@radix-ui/themes'
 import clsx from 'clsx'
-import { PropsWithChildren, createElement } from 'react'
+import { PropsWithChildren, createElement } from 'react';
 import { IconType } from 'react-icons'
-import { BiBot, BiBuildings } from 'react-icons/bi'
+import { BiBot, BiBuildings, BiHelpCircle } from 'react-icons/bi'
 import { BsBoxes } from 'react-icons/bs'
+import { FiHelpCircle, FiLifeBuoy } from 'react-icons/fi';
 import { LuCircleUserRound } from 'react-icons/lu'
 import { NavLink } from 'react-router-dom'
 
 export const SettingsSidebar = () => {
-
     return (
         <Box className="h-[calc(100vh-57px)] fixed w-64 border-r pt-2 border-gray-4 dark:border-gray-4">
             <Flex direction="column" gap='2' className='px-4'>
@@ -41,6 +41,8 @@ export const SettingsSidebar = () => {
                     <SettingsSidebarItem title="Commands" to='commands' />
                     <SettingsSidebarItem title="OpenAI Settings" to='openai-settings' />
                 </SettingsGroup>
+                <SettingsSeparator />
+                <SettingsSidebarItem title="Help & Support" to='help' standalone icon={FiLifeBuoy} />
             </Flex>
         </Box>
     )
@@ -65,7 +67,7 @@ const SettingsSidebarGroupHeader = ({ title, icon }: { title: string, icon: Icon
     )
 }
 
-const SettingsSidebarItem = ({ title, to, end }: { title: string, to: string, end?: boolean }) => {
+const SettingsSidebarItem = ({ title, to, end, standalone = false, icon }: { title: string, to: string, end?: boolean, standalone?: boolean, icon?: IconType }) => {
 
     const activeClass = "bg-slate-3 dark:bg-slate-4 hover:bg-slate-3 hover:dark:bg-slate-4"
 
@@ -77,8 +79,9 @@ const SettingsSidebarItem = ({ title, to, end }: { title: string, to: string, en
         >
             {({ isActive }) => {
                 return (
-                    <Box className='ml-4'>
-                        <Flex className={clsx(`px-2 py-1 text-gray-12 rounded-md w-full`, isActive ? activeClass : "bg-transparent hover:bg-slate-2 hover:dark:bg-slate-3")}>
+                    <Box className={!standalone ? 'ml-4' : ''}>
+                        <Flex className={clsx(`px-2 py-1 text-gray-12 rounded-md w-full items-center`, isActive ? activeClass : "bg-transparent hover:bg-slate-2 hover:dark:bg-slate-3", standalone ? "gap-1.5" : '')}>
+                            {icon ? createElement(icon, { size: 15 }) : null}
                             <Text className='text-[13px]' weight='medium'>{__(title)}</Text>
                         </Flex>
                     </Box>
diff --git a/frontend/src/pages/settings/HelpAndSupport.tsx b/frontend/src/pages/settings/HelpAndSupport.tsx
new file mode 100644
index 00000000..1f7b3e42
--- /dev/null
+++ b/frontend/src/pages/settings/HelpAndSupport.tsx
@@ -0,0 +1,72 @@
+import { Button, Flex, Link, Text } from "@radix-ui/themes";
+import { FiExternalLink, FiMail } from "react-icons/fi"
+import { useBoolean } from "@/hooks/useBoolean"
+import PageContainer from "@/components/layout/Settings/PageContainer"
+import SettingsContentContainer from "@/components/layout/Settings/SettingsContentContainer"
+import SettingsPageHeader from "@/components/layout/Settings/SettingsPageHeader"
+import { Stack } from "@/components/layout/Stack"
+import CreateSupportTicketDialog from "../../components/feature/settings/help/SupportRequest"
+import SocketIOHealth from "@/components/feature/settings/help/SocketIOHealth"
+
+const HelpAndSupport = () => {
+    const [open, { on, off }] = useBoolean()
+
+    return (
+        <PageContainer>
+            <SettingsContentContainer>
+                <SettingsPageHeader
+                    title='Help and Support'
+                    description='Your gateway to seamless support, system insights, and community resources.'
+                />
+
+                <Stack gap="5" pt="4">
+                    <Flex align="center" gap="2">
+                        <Text color="gray" size="2" as='span' className='font-medium'>Looking for help? Raise a new support request, and our team will assist you promptly. </Text>
+                        <Button size="1" onClick={on} variant="soft" title="Click here to send us feedback or file an issue" aria-label="click here to send us feedback or file an issue">
+                            Click here
+                        </Button>
+                    </Flex>
+
+                    <SocketIOHealth />
+
+                    <ul className="list-none">
+                        <li>
+                            <Link color='gray' underline="always" size='2' target="_blank"
+                                title="https://github.com/The-Commit-Company/raven"
+                                href="https://github.com/The-Commit-Company/raven">GitHub <FiExternalLink size='12' />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link color='gray' underline="always" size='2' target="_blank"
+                                title="https://community.ravenapp.cloud"
+                                href="https://community.ravenapp.cloud">Community <FiExternalLink size='12' />
+                            </Link>
+                        </li>
+                        <li>
+                            <Link color='gray' underline="always" size='2' target="_blank"
+                                title="https://ravenchat.ai"
+                                href="https://ravenchat.ai">Website <FiExternalLink size='12' />
+                            </Link>
+                        </li>
+                    </ul>
+
+                    <Link underline="always" size='2' target="_blank"
+                        title="support@thecommit.company"
+                        href="mailto:support@thecommit.company">Need support? Email us <FiMail size='15' />
+                    </Link>
+
+                    <Stack justify="end">
+                        {/* @ts-expect-error */}
+                        <Text size='2' color='gray'><Text size='4' className="cal-sans text-gray-12 dark:text-white">raven</Text> v{frappe?.boot.versions.raven}</Text>
+                        <Text size='1' color='gray'>Crafted by The Commit Company</Text>
+                    </Stack>
+                </Stack>
+
+            </SettingsContentContainer>
+
+            <CreateSupportTicketDialog open={open} onClose={off} />
+        </PageContainer>
+    )
+}
+
+export const Component = HelpAndSupport

From f2d4303b76341cb93eccbe456acc556d6f0270c4 Mon Sep 17 00:00:00 2001
From: pranavmene2000 <menepraanv2000@gmail.com>
Date: Tue, 17 Dec 2024 22:31:26 +0530
Subject: [PATCH 2/6] fix: system_health_report href

---
 .../src/components/feature/settings/help/SocketIOHealth.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/feature/settings/help/SocketIOHealth.tsx b/frontend/src/components/feature/settings/help/SocketIOHealth.tsx
index 4e1714e2..d9910625 100644
--- a/frontend/src/components/feature/settings/help/SocketIOHealth.tsx
+++ b/frontend/src/components/feature/settings/help/SocketIOHealth.tsx
@@ -61,8 +61,8 @@ const SocketIOHealth = () => {
                 </Flex>}
 
                 <Link ml={"auto"} underline="always" size='2' target="_blank"
-                    title="http://localhost:8000/app/system-health-report"
-                    href="http://localhost:8000/app/system-health-report">System Health Report <TbReportAnalytics size='15' />
+                    title="/app/system-health-report"
+                    href="/app/system-health-report">System Health Report <TbReportAnalytics size='15' />
                 </Link>
             </Flex>
         </SettingsContentContainer>

From 80156cb90cab2a755b9c42245d54a28059874135 Mon Sep 17 00:00:00 2001
From: pranavmene2000 <menepraanv2000@gmail.com>
Date: Wed, 18 Dec 2024 19:37:02 +0530
Subject: [PATCH 3/6] feat: submit form to help-desk

---
 .../feature/settings/help/SocketIOHealth.tsx  |  43 +++---
 .../feature/settings/help/SupportRequest.tsx  | 137 ++++++++++++------
 .../src/pages/settings/HelpAndSupport.tsx     |  43 ++++--
 raven/api/support_request.py                  |  40 +++++
 4 files changed, 178 insertions(+), 85 deletions(-)
 create mode 100644 raven/api/support_request.py

diff --git a/frontend/src/components/feature/settings/help/SocketIOHealth.tsx b/frontend/src/components/feature/settings/help/SocketIOHealth.tsx
index d9910625..607401da 100644
--- a/frontend/src/components/feature/settings/help/SocketIOHealth.tsx
+++ b/frontend/src/components/feature/settings/help/SocketIOHealth.tsx
@@ -1,6 +1,6 @@
 import { ErrorCallout } from "@/components/common/Callouts/ErrorCallouts"
-import SettingsContentContainer from "@/components/layout/Settings/SettingsContentContainer"
-import { Badge, Flex, IconButton, Link, Text } from "@radix-ui/themes"
+import { Stack } from "@/components/layout/Stack"
+import { Badge, Flex, Heading, IconButton, Link, Text } from "@radix-ui/themes"
 import clsx from "clsx"
 import { FrappeConfig, FrappeContext, useFrappeEventListener } from "frappe-react-sdk"
 import { useContext, useEffect, useState } from "react"
@@ -40,32 +40,33 @@ const SocketIOHealth = () => {
     }, []);
 
     return (
-        <SettingsContentContainer>
+        <Stack>
+            <Heading as='h3' size='3' className="not-cal font-semibold">Realtime Connection Test</Heading>
+            <Text size='2' color='gray'>If messages on Raven do not appear in realtime, you can inspect your network connection here.</Text>
             {!loading && socketPingTest === 'Fail' && <ErrorCallout
                 message="Realtime connections are not working on your site. Messages won't be refreshed in real-time."
             />}
-            <Flex gap="9" align="center">
-                <Flex gap="2" align="center">
-                    <Text size="2" color="gray" as='span' className='font-medium'>Real-time Ping Check:</Text>
-                    <Flex align="center" gap="2">
-                        <Badge color={loading ? 'gray' : socketPingTest === "Pass" ? 'green' : 'red'}>{loading ? 'Loading...' : socketPingTest}</Badge>
-                        {!loading && <IconButton title="Send a ping" aria-label="send a ping" color="gray" size="1" variant="ghost" onClick={onPingCheck}>
-                            <LuRefreshCcw className={clsx(loading ? "animate-spin" : null)} size={12} />
-                        </IconButton>}
-                    </Flex>
+            <Flex gap="3" align="center" pt='2'>
+                <Text size="2" color="gray" as='span'>Real-time Ping Check:</Text>
+                <Flex align="center" gap="2">
+                    <Badge color={loading ? 'gray' : socketPingTest === "Pass" ? 'green' : 'red'}>{loading ? 'Loading...' : socketPingTest}</Badge>
+                    {!loading && <IconButton title="Send a ping" aria-label="send a ping" color="gray" size="1" variant="ghost" onClick={onPingCheck}>
+                        <LuRefreshCcw className={clsx(loading ? "animate-spin" : null)} size={12} />
+                    </IconButton>}
                 </Flex>
+            </Flex>
 
-                {socketTransportMode && <Flex gap="2" align="center">
-                    <Text size="2" color="gray" as='span' className='font-medium'>SocketIO Transport Mode:</Text>
-                    <Badge color="orange">{socketTransportMode}</Badge>
-                </Flex>}
-
-                <Link ml={"auto"} underline="always" size='2' target="_blank"
+            {socketTransportMode && <Flex gap="2" align="center">
+                <Text size="2" color="gray" as='span'>SocketIO Transport Mode:</Text>
+                <Badge color="orange">{socketTransportMode}</Badge>
+            </Flex>}
+            <div className="pt-2">
+                <Link underline="always" size='2' target="_blank"
                     title="/app/system-health-report"
-                    href="/app/system-health-report">System Health Report <TbReportAnalytics size='15' />
+                    href="/app/system-health-report"><TbReportAnalytics size='16' className="-mb-0.5 pr-1" />View Full System Health Report
                 </Link>
-            </Flex>
-        </SettingsContentContainer>
+            </div>
+        </Stack>
     )
 }
 
diff --git a/frontend/src/components/feature/settings/help/SupportRequest.tsx b/frontend/src/components/feature/settings/help/SupportRequest.tsx
index bd787bbb..9d41927f 100644
--- a/frontend/src/components/feature/settings/help/SupportRequest.tsx
+++ b/frontend/src/components/feature/settings/help/SupportRequest.tsx
@@ -1,25 +1,50 @@
-import { Box, Button, Dialog, Flex, RadioCards, Text, TextArea, TextField } from "@radix-ui/themes"
-import { useMemo, useState } from "react"
+import { ReactNode } from "react";
+import { Box, Button, Dialog, Flex, Link, RadioCards, Text, TextArea, TextField } from "@radix-ui/themes"
 import { Controller, useForm } from "react-hook-form"
-import { MdOutlineFeedback } from "react-icons/md";
-import { LuBug } from "react-icons/lu"
+import { MdOutlineMessage, MdOutlineQuestionMark } from "react-icons/md";
+import clsx from "clsx";
+import { useFrappePostCall } from "frappe-react-sdk";
+import { toast } from "sonner";
+import { BiBug } from "react-icons/bi";
 import { ErrorText, Label } from "@/components/common/Form"
 import { Loader } from "@/components/common/Loader"
 import { HStack, Stack } from "@/components/layout/Stack"
 import { DIALOG_CONTENT_CLASS } from "@/utils/layout/dialog"
-import useCurrentRavenUser from "@/hooks/useCurrentRavenUser"
+import { useUserData } from "@/hooks/useUserData";
 
-type Props = {
+type TicketType = "Feedback" | "Question" | "Bug"
+
+const subTitles: Record<TicketType, { heading: string, subHeading: string, defaultTextAreaValue: string, footerHeading: ReactNode }> = {
+    "Feedback": {
+        heading: "Send feedback",
+        subHeading: "How can we improve Linear? If you have a feature request, can you also share how you would use it and why it's important to you?",
+        defaultTextAreaValue: "What if...",
+        footerHeading: <span>You can also email us at <Link href="mailto:support@thecommit.company" underline="none" size='1' target="_blank">support@thecommit.company</Link> We can't respond to every request but we read all of them.</span>
+    },
+    "Question": {
+        heading: "Ask a question",
+        subHeading: "How can we help? Please share any relevant information we may need to answer your question.",
+        defaultTextAreaValue: "How do I...",
+        footerHeading: <span>You can also email us at <Link href="mailto:support@thecommit.company" underline="none" size='1' target="_blank">support@thecommit.company</Link></span>
+    },
+    "Bug": {
+        heading: "Contact us",
+        subHeading: "What is the issue? If you're reporting a bug, what are the steps you took so we can reproduce the behaviour?",
+        defaultTextAreaValue: "Something seems wrong...",
+        footerHeading: <span>You can also email us at <Link href="mailto:support@thecommit.company" underline="none" size='1' target="_blank">support@thecommit.company</Link></span>
+    },
+};
+
+interface CreateSupportTicketDialogProps {
     open: boolean
     onClose: VoidFunction
 }
-const CreateSupportTicketDialog = ({ open, onClose }: Props) => {
+
+const CreateSupportTicketDialog = ({ open, onClose }: CreateSupportTicketDialogProps) => {
 
     return (
         <Dialog.Root open={open} onOpenChange={onClose}>
-            <Dialog.Content maxWidth={'580px'} className={DIALOG_CONTENT_CLASS}>
-                <Dialog.Title mb={'1'}>Help and Support</Dialog.Title>
-                <Dialog.Description size={'2'}>Create a new support request</Dialog.Description>
+            <Dialog.Content maxWidth={'700px'} className={clsx(DIALOG_CONTENT_CLASS)}>
                 <SupportRequestForm onClose={onClose} />
             </Dialog.Content>
         </Dialog.Root>
@@ -27,82 +52,95 @@ const CreateSupportTicketDialog = ({ open, onClose }: Props) => {
 }
 
 interface SupportRequestFormFields {
-    requestType: "feedback" | "bug"
+    ticket_type: TicketType
     email: string
     description: string
 }
-const SupportRequestForm = ({ onClose }: { onClose: () => void }) => {
+interface SupportRequestFormProps {
+    onClose: () => void
+}
 
-    const { myProfile } = useCurrentRavenUser()
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const SupportRequestForm = ({ onClose }: SupportRequestFormProps) => {
 
-    const currentUserEmail = useMemo(() => {
-        const email = myProfile?.name;
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        return email && emailRegex.test(email) ? email : "";
-    }, [myProfile]);
+    const { name } = useUserData()
 
     const {
         control,
         register,
         formState: { errors },
-        handleSubmit
+        handleSubmit,
+        watch
     } = useForm<SupportRequestFormFields>({
         defaultValues: {
-            requestType: "feedback",
-            email: currentUserEmail
+            ticket_type: "Feedback",
+            email: emailRegex.test(name ?? '') ? name : ""
         }
     })
 
-    const [loading, setLoading] = useState(false)
+    const requestType = watch("ticket_type")
 
-    const onSubmit = (data: SupportRequestFormFields) => {
-        setLoading(true)
-
-        // Will send payload to API endpoint later on
+    const { call, error, loading } = useFrappePostCall('raven.api.support_request.submit_support_request')
 
-        setTimeout(() => {
-            setLoading(false)
-            onClose()
-        }, 1500)
+    const onSubmit = (data: SupportRequestFormFields) => {
+        call({
+            email: data.email,
+            ticket_type: data.ticket_type,
+            subject: data.description.substring(0, 140),
+            description: data.description
+        })
+            .then(() => {
+                toast.success("Form submitted successfully!")
+                onClose()
+            })
     }
 
     return (
         <form onSubmit={handleSubmit(onSubmit)}>
+            <Dialog.Title>{subTitles[requestType].heading}</Dialog.Title>
+            <Dialog.Description size={'2'} className="min-h-10 select-none">{subTitles[requestType].subHeading}</Dialog.Description>
             <Stack gap="2" pt="3">
                 <Controller
-                    name="requestType"
+                    name="ticket_type"
                     control={control}
                     rules={{
                         required: 'Request type is required',
-                        validate: (value) => ['feedback', 'bug'].includes(value) || 'Invalid request type'
+                        validate: (value) => Object.keys(subTitles).includes(value) || 'Invalid request type'
                     }}
                     render={({ field: { onChange, value } }) => (
                         <RadioCards.Root
                             value={value}
                             onValueChange={onChange}
                         >
-                            <RadioCards.Item value="feedback">
+                            <RadioCards.Item value="Feedback">
                                 <Flex direction="column" width="100%" gap="1">
                                     <Flex align="center" gap="3">
-                                        <MdOutlineFeedback size="16" />
+                                        <MdOutlineMessage size="16" />
                                         <Text weight="bold">Feedback</Text>
                                     </Flex>
-                                    <Text>We'd love to hear your feedback!</Text>
                                 </Flex>
                             </RadioCards.Item>
-                            <RadioCards.Item value="bug">
+                            <RadioCards.Item value="Question">
                                 <Flex direction="column" width="100%" gap="1">
                                     <Flex align="center" gap="3">
-                                        <LuBug size="16" />
+                                        <MdOutlineQuestionMark size="16" />
+                                        <Text weight="bold">Question</Text>
+                                    </Flex>
+                                </Flex>
+                            </RadioCards.Item>
+                            <RadioCards.Item value="Bug">
+                                <Flex direction="column" width="100%" gap="1">
+                                    <Flex align="center" gap="3">
+                                        <BiBug size="16" />
                                         <Text weight="bold">Bug</Text>
                                     </Flex>
-                                    <Text>Encountered an issue?</Text>
                                 </Flex>
                             </RadioCards.Item>
                         </RadioCards.Root>
                     )}
                 />
-                {errors.requestType && <ErrorText>{errors.requestType.message}</ErrorText>}
+
+                {errors.ticket_type && <ErrorText>{errors.ticket_type.message}</ErrorText>}
 
                 <Stack>
                     <Box>
@@ -137,21 +175,24 @@ const SupportRequestForm = ({ onClose }: { onClose: () => void }) => {
                             })}
                             rows={5}
                             resize='vertical'
-                            placeholder="Please provide detailed information"
+                            placeholder={subTitles[requestType].defaultTextAreaValue}
                             aria-invalid={errors.description ? 'true' : 'false'}
                         />
                     </Box>
                     {errors.description && <ErrorText>{errors.description?.message}</ErrorText>}
                 </Stack>
 
-                <HStack justify={'end'} pt='4'>
-                    <Dialog.Close>
-                        <Button color='gray' variant={'soft'} disabled={loading}>Cancel</Button>
-                    </Dialog.Close>
-                    <Button type="submit" disabled={loading} >
-                        {loading ? <Loader className="text-white" /> : null}
-                        Submit
-                    </Button>
+                <HStack justify="between" pt='4' gap="9">
+                    <Text color="gray" size="1" className="select-none">{subTitles[requestType].footerHeading}</Text>
+                    <Flex gap="2">
+                        <Dialog.Close>
+                            <Button color='gray' variant={'soft'} disabled={loading && !error}>Cancel</Button>
+                        </Dialog.Close>
+                        <Button type="submit" disabled={loading} >
+                            {loading && !error ? <Loader className="text-white" /> : null}
+                            Submit
+                        </Button>
+                    </Flex>
                 </HStack>
             </Stack>
         </form>
diff --git a/frontend/src/pages/settings/HelpAndSupport.tsx b/frontend/src/pages/settings/HelpAndSupport.tsx
index 1f7b3e42..1204c36a 100644
--- a/frontend/src/pages/settings/HelpAndSupport.tsx
+++ b/frontend/src/pages/settings/HelpAndSupport.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Link, Text } from "@radix-ui/themes";
+import { Button, Code, Flex, Link, Separator, Text } from "@radix-ui/themes";
 import { FiExternalLink, FiMail } from "react-icons/fi"
 import { useBoolean } from "@/hooks/useBoolean"
 import PageContainer from "@/components/layout/Settings/PageContainer"
@@ -7,6 +7,7 @@ import SettingsPageHeader from "@/components/layout/Settings/SettingsPageHeader"
 import { Stack } from "@/components/layout/Stack"
 import CreateSupportTicketDialog from "../../components/feature/settings/help/SupportRequest"
 import SocketIOHealth from "@/components/feature/settings/help/SocketIOHealth"
+import { LuMessageSquareWarning } from "react-icons/lu";
 
 const HelpAndSupport = () => {
     const [open, { on, off }] = useBoolean()
@@ -16,18 +17,25 @@ const HelpAndSupport = () => {
             <SettingsContentContainer>
                 <SettingsPageHeader
                     title='Help and Support'
-                    description='Your gateway to seamless support, system insights, and community resources.'
                 />
 
-                <Stack gap="5" pt="4">
-                    <Flex align="center" gap="2">
-                        <Text color="gray" size="2" as='span' className='font-medium'>Looking for help? Raise a new support request, and our team will assist you promptly. </Text>
-                        <Button size="1" onClick={on} variant="soft" title="Click here to send us feedback or file an issue" aria-label="click here to send us feedback or file an issue">
-                            Click here
-                        </Button>
-                    </Flex>
+                <Stack gap="5">
+                    <Stack>
+                        <Text color="gray" size="2" as='span' className='font-medium'>Have ideas or ran into an issue?</Text>
+                        <div>
+                            <Button size="2" onClick={on} variant="outline"
+                                color='gray'
+                                className="not-cal cursor-pointer"
+                                title="Click here to send us feedback or file an issue" aria-label="click here to send us feedback or file an issue">
+                                <LuMessageSquareWarning />  Contact Us
+                            </Button>
+                        </div>
+
+                    </Stack>
+                    <Separator size='4' />
 
                     <SocketIOHealth />
+                    <Separator size='4' />
 
                     <ul className="list-none">
                         <li>
@@ -48,17 +56,20 @@ const HelpAndSupport = () => {
                                 href="https://ravenchat.ai">Website <FiExternalLink size='12' />
                             </Link>
                         </li>
+                        <li>
+                            <Link underline="always" size='2' target="_blank"
+                                color='gray'
+                                title="support@thecommit.company"
+                                href="mailto:support@thecommit.company">Support Email
+                            </Link>
+                        </li>
                     </ul>
 
-                    <Link underline="always" size='2' target="_blank"
-                        title="support@thecommit.company"
-                        href="mailto:support@thecommit.company">Need support? Email us <FiMail size='15' />
-                    </Link>
 
-                    <Stack justify="end">
+                    <Stack gap='0'>
                         {/* @ts-expect-error */}
-                        <Text size='2' color='gray'><Text size='4' className="cal-sans text-gray-12 dark:text-white">raven</Text> v{frappe?.boot.versions.raven}</Text>
-                        <Text size='1' color='gray'>Crafted by The Commit Company</Text>
+                        <Text size='3' color='gray'><Text size='4' className="cal-sans text-gray-12 dark:text-white">raven</Text> <Code size='2' variant="ghost">v{frappe?.boot.versions.raven}</Code></Text>
+                        <Text size='2' color='gray'>Crafted by The Commit Company</Text>
                     </Stack>
                 </Stack>
 
diff --git a/raven/api/support_request.py b/raven/api/support_request.py
new file mode 100644
index 00000000..f1693992
--- /dev/null
+++ b/raven/api/support_request.py
@@ -0,0 +1,40 @@
+import frappe
+import requests
+import json
+
+@frappe.whitelist(methods=["POST"])
+def submit_support_request(
+    email,
+    ticket_type, 
+    subject, 
+    description, 
+    status = "Open", 
+):
+    """
+    Submit a support ticket using Frappe's web form API.
+    """
+    
+    payload = {
+        "data": json.dumps({
+            "raised_by": email,
+            "subject": subject,
+            "ticket_type": ticket_type,
+            "description": description,
+            "status": status,
+            "doctype": "HD Ticket",
+            "web_form_name": "support-ticket",
+            "via_customer_portal" : 1
+        }),
+        "web_form": "support-ticket",
+    }
+
+    response = requests.post(
+        "https://community.ravenapp.cloud/api/method/frappe.website.doctype.web_form.web_form.accept", 
+        data=payload,
+        headers={'Content-Type': 'application/x-www-form-urlencoded'}
+    )
+    
+    if response.status_code == 200:
+        return "Ticket submitted successfully"
+    else:
+        frappe.throw(_("Failed to submit the ticket"))
\ No newline at end of file

From 97a9e8f12769660a5436cbe0edaa90cbd31bcb5e Mon Sep 17 00:00:00 2001
From: pranavmene2000 <menepraanv2000@gmail.com>
Date: Wed, 18 Dec 2024 19:45:57 +0530
Subject: [PATCH 4/6] fix: pre-commit warning

---
 raven/api/support_request.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/raven/api/support_request.py b/raven/api/support_request.py
index f1693992..ffd4da58 100644
--- a/raven/api/support_request.py
+++ b/raven/api/support_request.py
@@ -37,4 +37,4 @@ def submit_support_request(
     if response.status_code == 200:
         return "Ticket submitted successfully"
     else:
-        frappe.throw(_("Failed to submit the ticket"))
\ No newline at end of file
+        frappe.throw(_("Failed to submit the ticket"))

From 40c74ba0a7f819ad0a78b407ad1c030c9346031e Mon Sep 17 00:00:00 2001
From: pranavmene2000 <menepraanv2000@gmail.com>
Date: Wed, 18 Dec 2024 19:48:51 +0530
Subject: [PATCH 5/6] chore: linting

---
 .pre-commit-config.yaml      |  2 +-
 raven/api/support_request.py | 71 +++++++++++++++++++-----------------
 2 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index b4d1f3f9..933f3993 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -1,5 +1,5 @@
 exclude: "node_modules|.git"
-default_stages: [commit]
+default_stages: [pre-commit]
 fail_fast: false
 
 repos:
diff --git a/raven/api/support_request.py b/raven/api/support_request.py
index ffd4da58..369b24c2 100644
--- a/raven/api/support_request.py
+++ b/raven/api/support_request.py
@@ -1,40 +1,45 @@
+import json
+
 import frappe
 import requests
-import json
+from frappe import _
+
 
 @frappe.whitelist(methods=["POST"])
 def submit_support_request(
-    email,
-    ticket_type, 
-    subject, 
-    description, 
-    status = "Open", 
+	email,
+	ticket_type,
+	subject,
+	description,
+	status="Open",
 ):
-    """
-    Submit a support ticket using Frappe's web form API.
-    """
-    
-    payload = {
-        "data": json.dumps({
-            "raised_by": email,
-            "subject": subject,
-            "ticket_type": ticket_type,
-            "description": description,
-            "status": status,
-            "doctype": "HD Ticket",
-            "web_form_name": "support-ticket",
-            "via_customer_portal" : 1
-        }),
-        "web_form": "support-ticket",
-    }
+	"""
+	Submit a support ticket using Frappe's web form API.
+	"""
+
+	payload = {
+		"data": json.dumps(
+			{
+				"raised_by": email,
+				"subject": subject,
+				"ticket_type": ticket_type,
+				"description": description,
+				"status": status,
+				"doctype": "HD Ticket",
+				"web_form_name": "support-ticket",
+				"via_customer_portal": 1,
+			}
+		),
+		"web_form": "support-ticket",
+	}
+
+	response = requests.post(
+		"https://community.ravenapp.cloud/api/method/frappe.website.doctype.web_form.web_form.accept",
+		data=payload,
+		headers={"Content-Type": "application/x-www-form-urlencoded"},
+	)
 
-    response = requests.post(
-        "https://community.ravenapp.cloud/api/method/frappe.website.doctype.web_form.web_form.accept", 
-        data=payload,
-        headers={'Content-Type': 'application/x-www-form-urlencoded'}
-    )
-    
-    if response.status_code == 200:
-        return "Ticket submitted successfully"
-    else:
-        frappe.throw(_("Failed to submit the ticket"))
+	if response.status_code == 200:
+		return "Ticket submitted successfully"
+	else:
+		frappe.throw(_("Failed to submit the ticket"))

From dd3dc78d34e29d36f49c585ba864e1ce49c82174 Mon Sep 17 00:00:00 2001
From: Nikhil Kothari <nik.kothari22@live.com>
Date: Thu, 19 Dec 2024 02:45:19 +0530
Subject: [PATCH 6/6] Apply suggestions from code review

---
 .../src/components/feature/settings/help/SocketIOHealth.tsx     | 2 +-
 .../src/components/feature/settings/help/SupportRequest.tsx     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/feature/settings/help/SocketIOHealth.tsx b/frontend/src/components/feature/settings/help/SocketIOHealth.tsx
index 607401da..f3ac78f5 100644
--- a/frontend/src/components/feature/settings/help/SocketIOHealth.tsx
+++ b/frontend/src/components/feature/settings/help/SocketIOHealth.tsx
@@ -62,7 +62,7 @@ const SocketIOHealth = () => {
             </Flex>}
             <div className="pt-2">
                 <Link underline="always" size='2' target="_blank"
-                    title="/app/system-health-report"
+                    title="System Health Report"
                     href="/app/system-health-report"><TbReportAnalytics size='16' className="-mb-0.5 pr-1" />View Full System Health Report
                 </Link>
             </div>
diff --git a/frontend/src/components/feature/settings/help/SupportRequest.tsx b/frontend/src/components/feature/settings/help/SupportRequest.tsx
index 9d41927f..f810cb50 100644
--- a/frontend/src/components/feature/settings/help/SupportRequest.tsx
+++ b/frontend/src/components/feature/settings/help/SupportRequest.tsx
@@ -154,6 +154,7 @@ const SupportRequestForm = ({ onClose }: SupportRequestFormProps) => {
                                     message: "Invalid email address"
                                 }
                             })}
+                            type="email"
                             placeholder="email@example.com"
                             aria-invalid={errors.email ? 'true' : 'false'}
                         />