feat: omni channel chat

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

@@ -2,24 +2,42 @@ import { PageHeader } from "@/components/layout/Heading/PageHeader"
 import { ChannelIcon } from "@/utils/layout/channelIcon"
 import { ChannelListItem } from "@/utils/channel/ChannelListProvider"
 import { EditChannelNameButton } from "../channel-details/rename-channel/EditChannelNameButton"
-import { Flex, Heading } from "@radix-ui/themes"
+import { Flex, Heading, Text } from "@radix-ui/themes"
 import ChannelHeaderMenu from "./ChannelHeaderMenu"
 import { ViewChannelMemberAvatars } from "./ViewChannelMemberAvatars"
 import { BiChevronLeft } from "react-icons/bi"
 import { Link } from "react-router-dom"
 import { ViewPinnedMessagesButton } from "../pinned-messages/ViewPinnedMessagesButton"
 import { useAtomValue } from "jotai"
 import { lastWorkspaceAtom } from "@/utils/lastVisitedAtoms"
+import { useContext, useMemo } from "react"
+import { UserListContext } from "@/utils/users/UserListProvider"
+import { UserAvatar } from "@/components/common/UserAvatar"
+import { FaFacebook, FaLine } from "react-icons/fa"
+
+const PROVIDER_ICONS: Record<string, React.ReactNode> = {
+    line: <FaLine className='text-[#06C755]' />,
+    facebook: <FaFacebook className='text-[#1877F2]' />,
+}
 
 interface ChannelHeaderProps {
     channelData: ChannelListItem
 }
 
 export const ChannelHeader = ({ channelData }: ChannelHeaderProps) => {
 
-    // The channel header has the channel name, the channel type icon, edit channel name button, and the view or add members button
-
     const lastWorkspace = useAtomValue(lastWorkspaceAtom)
+    const { users } = useContext(UserListContext)
+
+    const customerUser = useMemo(
+        () => users.find(u => u.name === channelData.omni_channel_raven_user),
+        [users, channelData.omni_channel_raven_user]
+    )
+
+    const isOmniChannel = !!channelData.omni_channel_raven_user
+    const displayName = customerUser?.full_name ?? channelData.channel_name
+    const providerIcon = channelData.omni_channel_provider ? PROVIDER_ICONS[channelData.omni_channel_provider] : null
+    const providerDisplayName = channelData.omni_channel_display_name ?? channelData.omni_channel_chat_provider
 
     return (
         <PageHeader>
@@ -28,15 +46,38 @@ export const ChannelHeader = ({ channelData }: ChannelHeaderProps) => {
                     <BiChevronLeft size='24' className="block text-gray-12" />
                 </Link>
                 <Flex gap='4' align={'center'} className="group animate-fadein pr-4">
-                    <Flex gap='1' align={'center'}>
-                        <ChannelIcon type={channelData.type} size='18' />
-                        <Heading
-                            size={{
-                                initial: '4',
-                                sm: '5'
-                            }}
-                            className="mb-0.5 text-ellipsis line-clamp-1">{channelData.channel_name}</Heading>
-                    </Flex>
+                    {isOmniChannel ? (
+                        <Flex gap='2' align='center'>
+                            <UserAvatar
+                                src={customerUser?.user_image}
+                                alt={displayName}
+                                size='2'
+                            />
+                            <Heading
+                                size={{ initial: '4', sm: '5' }}
+                                className="mb-0.5 text-ellipsis line-clamp-1"
+                            >
+                                {displayName}
+                            </Heading>
+                            {providerDisplayName && (
+                                <>
+                                    <Text color='gray' size='4'>|</Text>
+                                    {providerIcon && <span className='flex items-center text-base'>{providerIcon}</span>}
+                                    <Text size='3' color='gray' className='text-ellipsis line-clamp-1'>{providerDisplayName}</Text>
+                                </>
+                            )}
+                        </Flex>
+                    ) : (
+                        <Flex gap='1' align={'center'}>
+                            <ChannelIcon type={channelData.type} size='18' />
+                            <Heading
+                                size={{
+                                    initial: '4',
+                                    sm: '5'
+                                }}
+                                className="mb-0.5 text-ellipsis line-clamp-1">{channelData.channel_name}</Heading>
+                        </Flex>
+                    )}
                     <EditChannelNameButton channelID={channelData.name} channel_name={channelData.channel_name} channelType={channelData.type} disabled={channelData.is_archived == 1} buttonVisible={!!channelData.pinned_messages_string} />
                     <ViewPinnedMessagesButton pinnedMessagesString={channelData.pinned_messages_string ?? ''} />
                 </Flex>

frontend/src/components/layout/Sidebar/OmniChannelSidebarBody.tsx

@@ -0,0 +1,170 @@
+import { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { Flex, ScrollArea, Text } from '@radix-ui/themes'
+import { ChannelListContext, ChannelListContextType, ChannelListItem } from '@/utils/channel/ChannelListProvider'
+import {
+    SidebarBadge,
+    SidebarGroup,
+    SidebarGroupItem,
+    SidebarGroupLabel,
+    SidebarGroupList,
+    SidebarIcon,
+    SidebarItem,
+    SidebarViewMoreButton,
+} from './SidebarComp'
+import { UserListContext } from '@/utils/users/UserListProvider'
+import { UserAvatar } from '@/components/common/UserAvatar'
+import { useFetchUnreadMessageCount } from '@/hooks/useUnreadMessageCount'
+import { useStickyState } from '@/hooks/useStickyState'
+import { __ } from '@/utils/translations'
+import { FaFacebook, FaLine } from 'react-icons/fa'
+
+type OmniChannelItem = ChannelListItem & { unread_count: number }
+
+interface ProviderGroup {
+    provider?: string
+    channels: OmniChannelItem[]
+}
+
+const PROVIDER_ICONS: Record<string, React.ReactNode> = {
+    line: <FaLine className='text-[#06C755]' />,
+    facebook: <FaFacebook className='text-[#1877F2]' />,
+}
+
+export const OmniChannelSidebarBody = () => {
+    const { channels } = useContext(ChannelListContext) as ChannelListContextType
+    const { workspaceID } = useParams()
+    const unread_count = useFetchUnreadMessageCount()
+
+    const channelsWithUnread = useMemo(() => {
+        const workspaceChannels = channels.filter(c => c.workspace === workspaceID && !c.is_archived)
+        return workspaceChannels.map(c => ({
+            ...c,
+            unread_count: unread_count?.message?.find(u => u.name === c.name)?.unread_count ?? 0,
+        })) as OmniChannelItem[]
+    }, [channels, workspaceID, unread_count])
+
+    const unreadChannels = useMemo(() => channelsWithUnread.filter(c => c.unread_count > 0), [channelsWithUnread])
+
+    const groupedChannels = useMemo(() => {
+        const groups: Record<string, ProviderGroup> = {}
+        channelsWithUnread.forEach(c => {
+            const key = c.omni_channel_display_name ?? c.omni_channel_chat_provider ?? 'Other'
+            if (!groups[key]) groups[key] = { provider: c.omni_channel_provider, channels: [] }
+            groups[key].channels.push(c)
+        })
+        return groups
+    }, [channelsWithUnread])
+
+    return (
+        <ScrollArea type="hover" scrollbars="vertical" className='h-[calc(100vh-4rem)]'>
+            <Flex direction='column' gap='2' className='overflow-x-hidden pb-12 sm:pb-0' px='2'>
+                {unreadChannels.length > 0 && (
+                    <OmniProviderGroup
+                        label={__("Unread")}
+                        channels={unreadChannels}
+                        storageKey="omni_unread"
+                        showProvider
+                    />
+                )}
+                {Object.entries(groupedChannels).map(([label, group]) => (
+                    <OmniProviderGroup
+                        key={label}
+                        label={label}
+                        channels={group.channels}
+                        provider={group.provider}
+                        storageKey={`omni_provider_${label}`}
+                    />
+                ))}
+            </Flex>
+        </ScrollArea>
+    )
+}
+
+interface OmniProviderGroupProps {
+    label: string
+    channels: OmniChannelItem[]
+    storageKey: string
+    provider?: string
+    showProvider?: boolean
+}
+
+const OmniProviderGroup = ({ label, channels, storageKey, provider, showProvider }: OmniProviderGroupProps) => {
+    const [showData, setShowData] = useStickyState(true, storageKey)
+    const toggle = () => setShowData((d: boolean) => !d)
+
+    const ref = useRef<HTMLDivElement>(null)
+    const [height, setHeight] = useState(ref?.current?.clientHeight ?? (showData ? channels.length * 44 : 0))
+
+    useLayoutEffect(() => {
+        setHeight(ref.current?.clientHeight ?? 0)
+    }, [channels])
+
+    const icon = provider ? PROVIDER_ICONS[provider] : null
+
+    return (
+        <SidebarGroup>
+            <SidebarGroupItem className='gap-1 pl-1'>
+                <Flex width='100%' justify='between' align='center' gap='2' pr='2' className='group'>
+                    <Flex align='center' gap='2' width='100%' onClick={toggle} className='cursor-default select-none'>
+                        {icon && <span className='flex items-center text-base'>{icon}</span>}
+                        <SidebarGroupLabel>{label}</SidebarGroupLabel>
+                    </Flex>
+                    <SidebarViewMoreButton onClick={toggle} expanded={showData} />
+                </Flex>
+            </SidebarGroupItem>
+            <SidebarGroup>
+                <SidebarGroupList style={{ height: showData ? height : 0 }}>
+                    <div ref={ref} className='flex gap-0.5 flex-col'>
+                        {channels.map(channel => (
+                            <OmniChannelItemRow
+                                key={channel.name}
+                                channel={channel}
+                                showProvider={showProvider}
+                            />
+                        ))}
+                    </div>
+                </SidebarGroupList>
+            </SidebarGroup>
+        </SidebarGroup>
+    )
+}
+
+const OmniChannelItemRow = ({ channel, showProvider }: { channel: OmniChannelItem, showProvider?: boolean }) => {
+    const { users } = useContext(UserListContext)
+    const { channelID } = useParams()
+
+    const customerUser = useMemo(() => users.find(u => u.name === channel.omni_channel_raven_user), [users, channel.omni_channel_raven_user])
+
+    const displayName = customerUser?.full_name ?? channel.channel_name
+    const showUnread = channel.unread_count > 0 && channelID !== channel.name
+
+    return (
+        <SidebarItem to={channel.name} className='py-1 px-2'>
+            <SidebarIcon>
+                <UserAvatar
+                    src={customerUser?.user_image}
+                    alt={displayName}
+                    size={{ initial: '2', md: '1' }}
+                />
+            </SidebarIcon>
+            <Flex direction='column' flexGrow='1' style={{ minWidth: 0 }}>
+                <Flex justify='between' align='center' width='100%'>
+                    <Text
+                        size={{ initial: '3', md: '2' }}
+                        className='text-ellipsis line-clamp-1'
+                        weight={showUnread ? 'bold' : 'medium'}
+                    >
+                        {displayName}
+                    </Text>
+                    {showUnread && <SidebarBadge>{channel.unread_count}</SidebarBadge>}
+                </Flex>
+                {showProvider && (channel.omni_channel_display_name ?? channel.omni_channel_chat_provider) && (
+                    <Text size='1' color='gray' className='text-ellipsis line-clamp-1'>
+                        {channel.omni_channel_display_name ?? channel.omni_channel_chat_provider}
+                    </Text>
+                )}
+            </Flex>
+        </SidebarItem>
+    )
+}

frontend/src/components/layout/Sidebar/SidebarBody.tsx

@@ -13,11 +13,27 @@ import { useGetChannelUnreadCounts } from './useGetChannelUnreadCounts'
 import { useParams } from 'react-router-dom'
 import { atomWithStorage } from 'jotai/utils'
 import useUnreadThreadsCount from '@/hooks/useUnreadThreadsCount'
+import useFetchWorkspaces from '@/hooks/fetchers/useFetchWorkspaces'
+import { OmniChannelSidebarBody } from './OmniChannelSidebarBody'
 
 export const showOnlyMyChannelsAtom = atomWithStorage('showOnlyMyChannels', false)
 
 export const SidebarBody = () => {
 
+    const { workspaceID } = useParams()
+    const { data: workspacesData } = useFetchWorkspaces()
+
+    const isOmniChannel = workspacesData?.message.find(w => w.name === workspaceID)?.is_omni_channel_workspace === 1
+
+    if (isOmniChannel) {
+        return <OmniChannelSidebarBody />
+    }
+
+    return <StandardSidebarBody />
+}
+
+const StandardSidebarBody = () => {
+
     const unread_count = useFetchUnreadMessageCount()
     const { channels, dm_channels } = useContext(ChannelListContext) as ChannelListContextType
 

frontend/src/hooks/fetchers/useFetchWorkspaces.ts

@@ -1,7 +1,7 @@
 import { useFrappeGetCall } from 'frappe-react-sdk'
 import { RavenWorkspace } from '@/types/Raven/RavenWorkspace'
 
-export type WorkspaceFields = Pick<RavenWorkspace, 'name' | 'workspace_name' | 'logo' | 'type' | 'can_only_join_via_invite' | 'description'> & {
+export type WorkspaceFields = Pick<RavenWorkspace, 'name' | 'workspace_name' | 'logo' | 'type' | 'can_only_join_via_invite' | 'description' | 'is_omni_channel_workspace'> & {
     workspace_member_name?: string
     is_admin?: 0 | 1
 }

frontend/src/types/Raven/RavenWorkspace.ts

@@ -22,4 +22,6 @@ export interface RavenWorkspace{
 	logo?: string
 	/**	Only allow admins to create channels in the workspace : Check - If unchecked, any workspace member can create a channel	*/
 	only_admins_can_create_channels?: 0 | 1
+	/**	Is Omni-Channel Workspace : Check	*/
+	is_omni_channel_workspace?: 0 | 1
 }

frontend/src/types/RavenChannelManagement/RavenChannel.ts

@@ -49,4 +49,10 @@ export interface RavenChannel{
 	openai_thread_id?: string
 	/**	Thread Bot : Link - Raven Bot	*/
 	thread_bot?: string
+	/**	Is Customer : Check	*/
+	is_customer?: 0 | 1
+	/**	Omni Channel Chat Provider : Link - Omni Channel Chat Provider	*/
+	omni_channel_chat_provider?: string
+	/**	Raven User for Omni Channel : Link - Raven User	*/
+	omni_channel_raven_user?: string
 }

frontend/src/utils/channel/ChannelListProvider.tsx

@@ -13,7 +13,8 @@ export type UnreadCountData = UnreadChannelCountItem[]
 
 export type ChannelListItem = Pick<RavenChannel, 'name' | 'channel_name' | 'type' |
     'channel_description' | 'is_direct_message' | 'is_self_message' |
-    'is_archived' | 'creation' | 'owner' | 'last_message_details' | 'last_message_timestamp' | 'workspace' | 'pinned_messages_string'> & { member_id: string }
+    'is_archived' | 'creation' | 'owner' | 'last_message_details' | 'last_message_timestamp' | 'workspace' | 'pinned_messages_string' |
+    'omni_channel_chat_provider' | 'omni_channel_raven_user'> & { member_id: string, omni_channel_display_name?: string, omni_channel_provider?: string }
 
 export interface DMChannelListItem extends ChannelListItem {
     peer_user_id: string,

raven/api/raven_channel.py

@@ -45,8 +45,8 @@ def get_channel_list(hide_archived: bool = False):
 	"""
 	channel = frappe.qb.DocType("Raven Channel")
 	channel_member = frappe.qb.DocType("Raven Channel Member")
-
 	workspace_member = frappe.qb.DocType("Raven Workspace Member")
+	omni_provider = frappe.qb.DocType("Omni Channel Chat Provider")
 
 	query = (
 		frappe.qb.from_(channel)
@@ -64,6 +64,10 @@ def get_channel_list(hide_archived: bool = False):
 			channel.last_message_details,
 			channel.pinned_messages_string,
 			channel.workspace,
+			channel.omni_channel_chat_provider,
+			channel.omni_channel_raven_user,
+			omni_provider.display_name.as_("omni_channel_display_name"),
+			omni_provider.provider.as_("omni_channel_provider"),
 			channel_member.name.as_("member_id"),
 		)
 		.left_join(channel_member)
@@ -75,6 +79,8 @@ def get_channel_list(hide_archived: bool = False):
 			(channel.workspace == workspace_member.workspace)
 			& (workspace_member.user == frappe.session.user)
 		)
+		.left_join(omni_provider)
+		.on(channel.omni_channel_chat_provider == omni_provider.name)
 		.where(
 			((channel.is_direct_message == 1) & (channel_member.user_id == frappe.session.user))
 			| (

raven/api/workspaces.py

@@ -30,6 +30,7 @@ def get_list():
 			workspace.type,
 			workspace.description,
 			workspace.can_only_join_via_invite,
+			workspace.is_omni_channel_workspace,
 			workspace_member.name.as_("workspace_member_name"),
 			workspace_member.is_admin.as_("is_admin"),
 		)

raven/modules.txt

@@ -3,4 +3,5 @@ Raven Messaging
 Raven Channel Management
 Raven Bot
 Raven Integrations
-Raven AI
+Raven AI
+Omni-Channel Chat