Merge pull request #1109 from The-Commit-Company/1096-custom-actions-…

…on-messages

feat: dynamic message actions

.flake8

@@ -25,6 +25,7 @@ ignore =
     W503,
     W504,
     F403,
+    F811,
     B007,
     B950,
     W191,

.github/helper/flake8.conf

@@ -57,6 +57,7 @@ ignore =
     F401,
     F403,
     F405,
+    F811,
     W191,
     W291,
     W292,

frontend/src/App.tsx

@@ -18,7 +18,8 @@ const NO_CACHE_KEYS = [
   "frappe.desk.search.search_link",
   "frappe.model.workflow.get_transitions",
   "frappe.desk.reportview.get_count",
-  "frappe.core.doctype.server_script.server_script.enabled"
+  "frappe.core.doctype.server_script.server_script.enabled",
+  "raven.api.message_actions.get_action_defaults"
 ]
 
 
@@ -80,21 +81,17 @@ const router = createBrowserRouter(
                 <Route path="create" lazy={() => import('./pages/settings/ServerScripts/SchedulerEvents/CreateSchedulerEvent')} />
                 <Route path=":ID" lazy={() => import('./pages/settings/ServerScripts/SchedulerEvents/ViewSchedulerEvent')} />
               </Route>
+
+              <Route path="message-actions">
+                <Route index lazy={() => import('./pages/settings/MessageActions/MessageActionList')} />
+                <Route path="create" lazy={() => import('./pages/settings/MessageActions/CreateMessageAction')} />
+                <Route path=":ID" lazy={() => import('./pages/settings/MessageActions/ViewMessageAction')} />
+              </Route>
             </Route>
             <Route path=":channelID" lazy={() => import('@/pages/ChatSpace')}>
               <Route path="thread/:threadID" lazy={() => import('./components/feature/threads/ThreadDrawer/ThreadDrawer')} />
             </Route>
           </Route>
-          {/* <Route path='settings' lazy={() => import('./pages/settings/Settings')}>
-            <Route path='integrations'>
-              <Route path='webhooks' lazy={() => import('./pages/settings/Webhooks/WebhookList')} />
-              <Route path='webhooks/create' lazy={() => import('./pages/settings/Webhooks/CreateWebhook')} />
-              <Route path='webhooks/:ID' lazy={() => import('./pages/settings/Webhooks/ViewWebhook')} />
-              <Route path='scheduled-messages' lazy={() => import('./pages/settings/ServerScripts/SchedulerEvents/SchedulerEvents')} />
-              <Route path='scheduled-messages/create' lazy={() => import('./pages/settings/ServerScripts/SchedulerEvents/CreateSchedulerEvent')} />
-              <Route path='scheduled-messages/:ID' lazy={() => import('./pages/settings/ServerScripts/SchedulerEvents/ViewSchedulerEvent')} />
-            </Route>
-          </Route> */}
         </Route>
       </Route>
       <Route path='*' lazy={() => import('./pages/NotFound')} />

frontend/src/components/feature/CommandMenu/CommandMenu.tsx

@@ -6,8 +6,6 @@ import './commandMenu.styles.css'
 import ChannelList from './ChannelList'
 import UserList from './UserList'
 import clsx from 'clsx'
-import { BiCog, BiFile, BiMoon, BiSearch, BiSmile } from 'react-icons/bi'
-import ArchivedChannelList from './ArchivedChannelList'
 import { atom, useAtom } from 'jotai'
 import { useIsDesktop } from '@/hooks/useMediaQuery'
 import { Drawer, DrawerContent } from '@/components/layout/Drawer'

frontend/src/components/feature/CommandMenu/SettingsList.tsx

@@ -1,6 +1,6 @@
 import { Command } from 'cmdk'
 import { useSetAtom } from 'jotai'
-import { BiBot, BiFile, BiGroup, BiMessageSquareDots, BiUserCircle } from 'react-icons/bi'
+import { BiBoltCircle, BiBot, BiFile, BiGroup, BiMessageSquareDots, BiTime, BiUserCircle } from 'react-icons/bi'
 import { useNavigate } from 'react-router-dom'
 import { commandMenuOpenAtom } from './CommandMenu'
 import { PiOpenAiLogo } from 'react-icons/pi'
@@ -47,12 +47,17 @@ const SettingsList = (props: Props) => {
                 HR
             </Command.Item>
 
+            <Command.Item value='message-actions' onSelect={onSelect}>
+                <BiBoltCircle size={ICON_SIZE} />
+                Message Actions
+            </Command.Item>
+
             <Command.Item value='scheduled-messages' keywords={['scheduled messages']} onSelect={onSelect}>
-                <BiMessageSquareDots size={ICON_SIZE} />
+                <BiTime size={ICON_SIZE} />
                 Scheduled Messages
             </Command.Item>
 
-            <Command.Item value='webhooks' keywords={['webhooks']} onSelect={onSelect}>
+            <Command.Item value='webhooks' onSelect={onSelect}>
                 <AiOutlineApi size={ICON_SIZE} />
                 Webhooks
             </Command.Item>

frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActionSubMenu.tsx

@@ -0,0 +1,65 @@
+import { ContextMenu, Flex, Text } from '@radix-ui/themes'
+import { BiBoltCircle } from 'react-icons/bi'
+import { useFrappeGetDocList } from 'frappe-react-sdk'
+import { RavenMessageAction } from '@/types/RavenIntegrations/RavenMessageAction'
+import { useSetAtom } from 'jotai'
+import { messageActionAtom } from '@/components/feature/message-actions/MessageActionController'
+
+type Props = {
+    messageID: string,
+}
+
+const MessageActionSubMenu = (props: Props) => {
+    return <ContextMenu.Sub>
+        <ContextMenu.SubTrigger>
+            <Flex gap='2' align='center'>
+                <BiBoltCircle size={'18'} />
+                Actions
+            </Flex>
+        </ContextMenu.SubTrigger>
+        <ContextMenu.SubContent>
+            <MessageActionSubMenuContent {...props} />
+            {/* <ContextMenu.Separator />
+            <ContextMenu.Item>
+                <HStack align='center' justify='between' width='100%'>
+                    Create Action <BiLinkExternal size='16' />
+                </HStack>
+            </ContextMenu.Item> */}
+        </ContextMenu.SubContent>
+    </ContextMenu.Sub>
+}
+
+export default MessageActionSubMenu
+
+
+const MessageActionSubMenuContent = (props: Props) => {
+
+    const { data } = useFrappeGetDocList<RavenMessageAction>("Raven Message Action", {
+        fields: ['name', 'action_name'],
+        filters: [
+            ['enabled', '=', 1]
+        ],
+        orderBy: {
+            field: 'action',
+            order: 'asc'
+        }
+    }, undefined, {
+        revalidateOnFocus: false,
+    })
+
+    const setMessageAction = useSetAtom(messageActionAtom)
+
+    return <>
+        {data && data.length > 0 ? data?.map((action) => {
+            return <ContextMenu.Item key={action.name} onClick={() => setMessageAction({ actionID: action.name, messageID: props.messageID })}>
+                <Text size='2' weight='medium'>
+                    {action.action_name}
+                </Text>
+            </ContextMenu.Item>
+        })
+
+            : <ContextMenu.Item disabled>
+                No Actions Available
+            </ContextMenu.Item>}
+    </>
+}

frontend/src/components/feature/chat/ChatMessage/MessageActions/MessageActions.tsx

@@ -12,6 +12,7 @@ import { AiOutlineEdit } from 'react-icons/ai'
 import { LuForward, LuReply } from 'react-icons/lu'
 import { MdOutlineEmojiEmotions } from "react-icons/md";
 import { CreateThreadContextItem } from './QuickActions/CreateThreadButton'
+import MessageActionSubMenu from './MessageActionSubMenu'
 
 export interface MessageContextMenuProps {
     message?: Message | null,
@@ -103,6 +104,8 @@ export const MessageContextMenu = ({ message, onDelete, onEdit, onReply, onForwa
                     </ContextMenu.Item>
                 </ContextMenu.Group>}
 
+                <MessageActionSubMenu messageID={message.name} />
+
                 {isOwner && <ContextMenu.Group>
                     <ContextMenu.Separator />
                     {message.message_type === 'Text' &&

frontend/src/components/feature/message-actions/MessageActionController.tsx

@@ -0,0 +1,30 @@
+import { atom, useAtom } from 'jotai'
+import MessageActionModal from './MessageActionModal'
+
+type MessageActionAtomType = {
+    actionID: string,
+    messageID: string
+}
+export const messageActionAtom = atom<MessageActionAtomType>({
+    actionID: '',
+    messageID: ''
+})
+
+const MessageActionController = () => {
+
+    const [messageAction, setMessageAction] = useAtom(messageActionAtom)
+
+    const closeMessageAction = () => {
+        setMessageAction({ actionID: '', messageID: '' })
+    }
+
+    return (
+        <MessageActionModal
+            actionID={messageAction.actionID}
+            messageID={messageAction.messageID}
+            onClose={closeMessageAction}
+        />
+    )
+}
+
+export default MessageActionController