merging develop into main

.semgrepignore

@@ -1 +1,2 @@
-.devcontainer/docker-compose.yml
+.devcontainer/docker-compose.yml
+frontend/

README.md

@@ -136,8 +136,11 @@ Since Raven is a Frappe app, it can be installed via [frappe-bench](https://frap
 Once you have [setup your bench](https://frappeframework.com/docs/v14/user/en/installation) and your [site](https://frappeframework.com/docs/v14/user/en/tutorial/install-and-setup-bench), you can install the app via the following commands:
 
 ```bash
-bench get-app https://github.com/The-Commit-Company/Raven.git
-bench --site yoursite.name install-app raven
+bench get-app https://github.com/The-Commit-Company/raven.git
+```
+
+```bash
+bench --site <yoursite.name> install-app raven
 ```
 
 Post this, you can access Raven on your Frappe site at the `/raven` endpoint (e.g. https://yoursite.com/raven). 

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "raven-ui",
   "private": true,
   "license": "AGPL-3.0-only",
-  "version": "1.7.1",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -47,6 +47,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.52.2",
     "react-icons": "^5.3.0",
     "react-idle-timer": "^5.7.2",

frontend/src/App.tsx

@@ -9,7 +9,15 @@ import { ThemeProvider } from './ThemeProvider'
 import { Toaster } from 'sonner'
 import { useStickyState } from './hooks/useStickyState'
 import MobileTabsPage from './pages/MobileTabsPage'
-import { UserProfile } from './components/feature/userSettings/UserProfile/UserProfile'
+import Cookies from 'js-cookie'
+
+/** Following keys will not be cached in app cache */
+const NO_CACHE_KEYS = [
+  "frappe.desk.form.load.getdoctype",
+  "frappe.desk.search.search_link",
+  "frappe.model.workflow.get_transitions",
+  "frappe.desk.reportview.get_count"
+]
 
 
 const router = createBrowserRouter(
@@ -28,11 +36,36 @@ const router = createBrowserRouter(
             </Route>
             <Route path="saved-messages" lazy={() => import('./components/feature/saved-messages/SavedMessages')} />
             <Route path="settings" lazy={() => import('./pages/settings/Settings')}>
-              <Route index element={<UserProfile />} />
-              <Route path="profile" element={<UserProfile />} />
+              <Route index lazy={() => import('./components/feature/userSettings/UserProfile/UserProfile')} />
+              <Route path="profile" lazy={() => import('./components/feature/userSettings/UserProfile/UserProfile')} />
               <Route path="users" lazy={() => import('./components/feature/userSettings/Users/AddUsers')} />
-              <Route path="frappe-hr" lazy={() => import('./pages/settings/Integrations/FrappeHR')} />
-              {/* <Route path="bots" lazy={() => import('./components/feature/userSettings/Bots')} /> */}
+              <Route path="hr" lazy={() => import('./pages/settings/Integrations/FrappeHR')} />
+              <Route path="bots" >
+                <Route index lazy={() => import('./pages/settings/AI/BotList')} />
+                <Route path="create" lazy={() => import('./pages/settings/AI/CreateBot')} />
+                <Route path=":ID" lazy={() => import('./pages/settings/AI/ViewBot')} />
+              </Route>
+
+              <Route path="functions">
+                <Route index lazy={() => import('./pages/settings/AI/FunctionList')} />
+                <Route path="create" lazy={() => import('./pages/settings/AI/CreateFunction')} />
+                <Route path=":ID" lazy={() => import('./pages/settings/AI/ViewFunction')} />
+              </Route>
+
+
+              <Route path="instructions">
+                <Route index lazy={() => import('./pages/settings/AI/InstructionTemplateList')} />
+                <Route path="create" lazy={() => import('./pages/settings/AI/CreateInstructionTemplate')} />
+                <Route path=":ID" lazy={() => import('./pages/settings/AI/ViewInstructionTemplate')} />
+              </Route>
+
+              <Route path="commands">
+                <Route index lazy={() => import('./pages/settings/AI/SavedPromptsList')} />
+                <Route path="create" lazy={() => import('./pages/settings/AI/CreateSavedPrompt')} />
+                <Route path=":ID" lazy={() => import('./pages/settings/AI/ViewSavedPrompt')} />
+              </Route>
+
+              <Route path="openai-settings" lazy={() => import('./pages/settings/AI/OpenAISettings')} />
             </Route>
             <Route path=":channelID" lazy={() => import('@/pages/ChatSpace')}>
               <Route path="thread/:threadID" lazy={() => import('./components/feature/threads/ThreadDrawer/ThreadDrawer')} />
@@ -102,12 +135,52 @@ function App() {
 
 function localStorageProvider() {
   // When initializing, we restore the data from `localStorage` into a map.
-  const map = new Map<string, any>(JSON.parse(localStorage.getItem('app-cache') || '[]'))
+  // Check if local storage is recent (less than a week). Else start with a fresh cache.
+  const timestamp = localStorage.getItem('app-cache-timestamp')
+  let cache = '[]'
+  if (timestamp && Date.now() - parseInt(timestamp) < 7 * 24 * 60 * 60 * 1000) {
+    const localCache = localStorage.getItem('app-cache')
+    if (localCache) {
+      cache = localCache
+    }
+  }
+  const map = new Map<string, any>(JSON.parse(cache))
 
   // Before unloading the app, we write back all the data into `localStorage`.
   window.addEventListener('beforeunload', () => {
-    const appCache = JSON.stringify(Array.from(map.entries()))
-    localStorage.setItem('app-cache', appCache)
+
+
+    // Check if the user is logged in
+    const user_id = Cookies.get('user_id')
+    if (!user_id || user_id === 'Guest') {
+      localStorage.removeItem('app-cache')
+      localStorage.removeItem('app-cache-timestamp')
+    } else {
+      const entries = map.entries()
+
+      const cacheEntries = []
+
+      for (const [key, value] of entries) {
+
+        let hasCacheKey = false
+        for (const cacheKey of NO_CACHE_KEYS) {
+          if (key.includes(cacheKey)) {
+            hasCacheKey = true
+            break
+          }
+        }
+
+        //Do not cache doctype meta and search link
+        if (hasCacheKey) {
+          continue
+        }
+        cacheEntries.push([key, value])
+      }
+      const appCache = JSON.stringify(cacheEntries)
+      localStorage.setItem('app-cache', appCache)
+      localStorage.setItem('app-cache-timestamp', Date.now().toString())
+    }
+
   })
 
   // We still use the map for write & read for performance.

frontend/src/components/common/Form.tsx

@@ -18,12 +18,12 @@ export const Label = ({ children, isRequired, ...props }: LabelProps) => {
 
 export const HelperText = (props: TextProps) => {
     return (
-        <Text as='span' size='1' color='gray' {...props} />
+        <Text as='span' size='2' color='gray' {...props} />
     )
 }
 
 export const ErrorText = (props: TextProps) => {
     return (
-        <Text as='p' size='1' color='red' {...props} />
+        <Text as='p' size='2' color='red' {...props} />
     )
 }

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

@@ -24,7 +24,7 @@ export interface LinkFieldProps {
 
 const LinkField = ({ doctype, filters, label, placeholder, value, required, setValue, disabled, autofocus, dropdownClass }: LinkFieldProps) => {
 
-    const [searchText, setSearchText] = useState('')
+    const [searchText, setSearchText] = useState(value ?? '')
 
     const isDesktop = useIsDesktop()
 
@@ -49,14 +49,15 @@ const LinkField = ({ doctype, filters, label, placeholder, value, required, setV
         itemToString(item) {
             return item ? item.value : ''
         },
-        selectedItem: items.find(item => item.value === value),
         onSelectedItemChange({ selectedItem }) {
+
             setValue(selectedItem?.value ?? '')
         },
+        defaultInputValue: value,
+        defaultIsOpen: isDesktop && autofocus,
+        defaultSelectedItem: items.find(item => item.value === value),
     })
 
-    console.log(isOpen)
-
     return <div className="w-full">
         <div className="flex flex-col">
             <Label className="w-fit" isRequired={required} {...getLabelProps()}>

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

@@ -3,7 +3,7 @@ import LinkField, { LinkFieldProps } from './LinkField'
 
 interface LinkFormFieldProps extends Omit<LinkFieldProps, 'value' | 'setValue'> {
     name: string,
-    rules: ControllerProps['rules'],
+    rules?: ControllerProps['rules'],
     disabled?: boolean
 }
 

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

@@ -1,5 +1,5 @@
 import { DIALOG_CONTENT_CLASS } from '@/utils/layout/dialog'
-import { Dialog } from '@radix-ui/themes'
+import { Dialog, VisuallyHidden } from '@radix-ui/themes'
 import { Command } from 'cmdk'
 import { useEffect } from 'react'
 import './commandMenu.styles.css'
@@ -11,6 +11,7 @@ import ArchivedChannelList from './ArchivedChannelList'
 import { atom, useAtom } from 'jotai'
 import { useIsDesktop } from '@/hooks/useMediaQuery'
 import { Drawer, DrawerContent } from '@/components/layout/Drawer'
+import SettingsList from './SettingsList'
 
 export const commandMenuOpenAtom = atom(false)
 
@@ -21,7 +22,7 @@ const CommandMenu = () => {
     useEffect(() => {
 
         const down = (e: KeyboardEvent) => {
-            if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+            if (e.key === 'k' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
                 e.preventDefault()
                 setOpen((open) => !open)
             }
@@ -37,6 +38,12 @@ const CommandMenu = () => {
         return (
             <Dialog.Root open={open} onOpenChange={setOpen}>
                 <Dialog.Content className={clsx(DIALOG_CONTENT_CLASS, 'p-4 rounded-md')}>
+                    <VisuallyHidden>
+                        <Dialog.Title>Command Menu</Dialog.Title>
+                        <Dialog.Description>
+                            Search or type a command
+                        </Dialog.Description>
+                    </VisuallyHidden>
                     <CommandList />
                 </Dialog.Content>
             </Dialog.Root>
@@ -69,6 +76,7 @@ export const CommandList = () => {
             <Command.Empty>No results found.</Command.Empty>
             <ChannelList />
             <UserList />
+            <SettingsList />
 
             {/* TODO: Make these commands work */}
             {/* <Command.Group heading="Commands">

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

@@ -0,0 +1,77 @@
+import { Command } from 'cmdk'
+import { useSetAtom } from 'jotai'
+import { BiBot, BiFile, BiGroup, BiMessageSquareDots, BiUserCircle } from 'react-icons/bi'
+import { useNavigate } from 'react-router-dom'
+import { commandMenuOpenAtom } from './CommandMenu'
+import { PiOpenAiLogo } from 'react-icons/pi'
+import { LuFunctionSquare } from 'react-icons/lu'
+
+type Props = {}
+
+const ICON_SIZE = 16
+
+const SettingsList = (props: Props) => {
+
+    const navigate = useNavigate()
+
+    const setOpen = useSetAtom(commandMenuOpenAtom)
+
+    const onSelect = (value: string) => {
+        navigate(`/channel/settings/${value}`)
+        setOpen(false)
+    }
+    return (
+        <Command.Group heading='Settings'>
+            <Command.Item value='profile' onSelect={onSelect}>
+                <BiUserCircle size={ICON_SIZE} />
+                Profile
+            </Command.Item>
+            <Command.Item value='users' onSelect={onSelect}>
+                <BiGroup size={ICON_SIZE} />
+                Users
+            </Command.Item>
+            <Command.Item value='hr' onSelect={onSelect}>
+                <svg fill="none" viewBox="0 0 32 32" width={18} height={18} xmlns="http://www.w3.org/2000/svg">
+                    <g clipPath="url(#clip0_2850_17380)">
+                        <path d="M25.5561 0H6.44394C2.88505 0 0 2.88505 0 6.44394V25.5561C0 29.115 2.88505 32 6.44394 32H25.5561C29.115 32 32 29.115 32 25.5561V6.44394C32 2.88505 29.115 0 25.5561 0Z" fill="#A1EEC9"></path>
+                        <path d="M15.4061 18.5995C12.4184 18.5995 9.97265 16.1684 9.97265 13.1661V12.6974L12.8724 12.7267L12.8431 13.1661C12.8431 14.572 13.9855 15.729 15.4061 15.729H16.5777C17.9836 15.729 19.1406 14.5867 19.1406 13.1661V11.9944C19.1406 10.5885 17.9983 9.43151 16.5777 9.43151H9.94336L9.97265 6.53174L16.5777 6.56103C19.5653 6.56103 22.0111 8.99215 22.0111 11.9944V13.1661C22.0111 16.1537 19.58 18.5995 16.5777 18.5995H15.4061Z" fill="#0B313A"></path>
+                        <path d="M8.78613 23.2714C10.7779 21.5286 13.3408 20.5474 16.0063 20.5474C18.6717 20.5474 21.2346 21.5286 23.2264 23.3153L21.2932 25.4389C19.8287 24.1355 17.9541 23.4178 16.0063 23.4178C14.0584 23.4178 12.1692 24.1355 10.7047 25.4535L8.80078 23.2714H8.78613Z" fill="#0B313A"></path>
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_2850_17380">
+                            <rect fill="white" height="32" width="32"></rect>
+                        </clipPath>
+                    </defs>
+                </svg>
+                HR
+            </Command.Item>
+
+            <Command.Item value='bots' onSelect={onSelect}>
+                <BiBot size={ICON_SIZE} />
+                Bots
+            </Command.Item>
+
+            <Command.Item value='functions' onSelect={onSelect}>
+                <LuFunctionSquare size={ICON_SIZE} />
+                Functions
+            </Command.Item>
+
+            <Command.Item value='instructions' onSelect={onSelect}>
+                <BiFile size={ICON_SIZE} />
+                Instructions
+            </Command.Item>
+
+            <Command.Item value='commands' onSelect={onSelect}>
+                <BiMessageSquareDots size={ICON_SIZE} />
+                Commands
+            </Command.Item>
+
+            <Command.Item value='openai-settings' onSelect={onSelect}>
+                <PiOpenAiLogo size={ICON_SIZE} />
+                OpenAI Settings
+            </Command.Item>
+        </Command.Group>
+    )
+}
+
+export default SettingsList

frontend/src/components/feature/ai/AIEvent.tsx

@@ -0,0 +1,49 @@
+import { Loader } from '@/components/common/Loader'
+import { Text } from '@radix-ui/themes'
+import clsx from 'clsx'
+import { useFrappeEventListener } from 'frappe-react-sdk'
+import { useEffect, useState } from 'react'
+
+type Props = {
+    channelID: string
+}
+
+const AIEvent = ({ channelID }: Props) => {
+    const [aiEvent, setAIEvent] = useState("")
+    const [showAIEvent, setShowAIEvent] = useState(false)
+
+    useFrappeEventListener("ai_event", (data) => {
+        if (data.channel_id === channelID) {
+            setAIEvent(data.text)
+            setShowAIEvent(true)
+        }
+    })
+
+    useFrappeEventListener("ai_event_clear", (data) => {
+        if (data.channel_id === channelID) {
+            setAIEvent("")
+        }
+    })
+
+    useEffect(() => {
+        if (!aiEvent) {
+            setTimeout(() => {
+                setShowAIEvent(false)
+            }, 300)
+        }
+    }, [aiEvent])
+
+    return (
+        <div className={clsx(
+            'w-full transition-all duration-300 ease-ease-out-quart',
+            showAIEvent ? 'translate-y-0 opacity-100 z-50' : 'translate-y-full opacity-0 h-0'
+        )}>
+            <div className="flex items-center gap-2 py-2 px-2 bg-white dark:bg-gray-2">
+                <Loader />
+                <Text size='2'>{aiEvent}</Text>
+            </div>
+        </div>
+    )
+}
+
+export default AIEvent