@messenger-box/tailwind-ui-inbox 10.0.3-alpha.108 → 10.0.3-alpha.109

package/src/components/InboxMessage/message-widgets/ModernMessageGroup.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { format, differenceInMinutes } from 'date-fns';
-import { IAuthUser, IPost, ISandboxError } from 'common';
+import { AiAgentMessageRole, IAuthUser, IPost, ISandboxError, PostTypeEnum } from 'common';
 import { FilesList } from '../../inbox';
 import { ErrorFixCard } from './ErrorFixCard';
 import ReactMarkdown from 'react-markdown';
@@ -921,7 +921,16 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
     // Inject CSS styles for HTML content
     useInjectStyles();
 
-    const isOwnMessage = author?.id === currentUser?.id;
+    //const isOwnMessage = author?.id === currentUser?.id;
+    //const isOwnMessage = messages.some((message: any) => (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.User);
+    const isOwnMessage =
+        messages.some(
+            (message: any) => (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.User,
+        ) ||
+        (Array.isArray(author?.alias) &&
+            typeof currentUser?.authUserId === 'string' &&
+            author.alias.some((alias: string) => alias?.toLowerCase() === currentUser.authUserId.toLowerCase()));
+
     const authorName =
         author?.givenName && author?.familyName
             ? `${author.givenName} ${author.familyName}`
@@ -934,10 +943,13 @@ const ModernMessageGroup: React.FC<MessageGroupProps> = ({
     };
 
     // Determine if this is an AI/system message for special styling
-    const isSystemMessage =
-        author?.username?.toLowerCase().includes('ai') ||
-        author?.username?.toLowerCase().includes('assistant') ||
-        author?.username?.toLowerCase().includes('system');
+    // const isSystemMessage =
+    //     author?.username?.toLowerCase().includes('ai') ||
+    //     author?.username?.toLowerCase().includes('assistant') ||
+    //     author?.username?.toLowerCase().includes('system');
+    const isSystemMessage = messages.some(
+        (message: any) => (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.Assistant,
+    );
 
     // For user messages, don't show group header, just individual messages with avatars
     if (isOwnMessage) {
@@ -1046,8 +1058,7 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
         onMessageClick?.(message);
     };
 
-    const isAssistantRole = (message as any)?.propsConfiguration?.contents?.role === 'ASSISTANT';
-
+    const isAssistantRole = (message as any)?.propsConfiguration?.contents?.role === AiAgentMessageRole.Assistant;
     // For user messages, create a right-aligned layout with avatar and name
     if (isOwnMessage) {
         const authorName =
@@ -1131,7 +1142,8 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
                                 } transition-opacity object-cover`}
                                 src={message.author?.picture || '/default-avatar.svg'}
                                 alt={authorName}
-                                onClick={isAssistantRole ? undefined : handleClick}
+                                //onClick={isAssistantRole ? undefined : handleClick}
+                                onClick={isAssistantRole ? handleClick : undefined}
                                 onError={(e) => {
                                     e.currentTarget.src = '/default-avatar.svg';
                                 }}
@@ -1147,9 +1159,10 @@ const ModernMessageBubble: React.FC<ModernMessageBubbleProps> = ({
     return (
         <div
             className={`group/message transition-all duration-200 hover:bg-gray-50 rounded-lg px-3 py-1 -mx-3 ${
-                isSystemMessage || isAssistantRole ? '' : 'cursor-pointer'
+                isSystemMessage || isAssistantRole ? 'cursor-pointer' : ''
             }`}
-            onClick={isSystemMessage || isAssistantRole ? undefined : handleClick}
+            // onClick={isSystemMessage || isAssistantRole ? undefined : handleClick}
+            onClick={isSystemMessage || isAssistantRole ? handleClick : undefined}
         >
             <div className="flex items-start justify-between gap-3">
                 <div className="flex-1 min-w-0">
@@ -1251,7 +1264,6 @@ export const ModernMessageGroupComponent: React.FC<ModernMessageGroupProps> = ({
     sandboxErrors = [],
     currentFiles = {},
     onFixError,
-    onRecreateSandbox,
 }) => {
     // Inject CSS styles for HTML content
     useInjectStyles();

package/src/compute.ts

@@ -63,27 +63,37 @@ export const messengerPageStore: IRouteModule[] | { [key: string]: any } = [
         name: 'AiMessenger',
         path: '/ai-messenger',
     },
-
     {
         exact: false,
         icon: 'AiOutlineInbox',
-        key: 'ai-messenger-with-message-app',
+        key: 'ai-messenger-with-org-name',
+        component: () => import('./container/InboxWithAiLoader'),
+        tab: 'Ai Messenger',
+        position: IMenuPosition.Middle,
+        name: 'AiMessengerWithOrgName',
+        path: '//o/:orgName/ai-messenger',
+    },
+    {
+        exact: false,
+        icon: 'AiOutlineInbox',
+        key: 'ai-messenger-app-with-channel-id',
         component: () => import('./container/InboxAiMessagesLoader'),
         tab: 'Ai Messenger',
         position: IMenuPosition.Middle,
-        name: 'AiMessengerWithMessageApp',
-        path: '/ai-messenger/app',
+        name: 'AiMessengerAppWithChannelId',
+        path: '/ai-messenger/app/:id',
     },
     {
         exact: false,
         icon: 'AiOutlineInbox',
-        key: 'ai-messenger-with-org-name',
-        component: () => import('./container/InboxWithAiLoader'),
+        key: 'ai-messenger-app-with-org-and-channel-id',
+        component: () => import('./container/InboxAiMessagesLoader'),
         tab: 'Ai Messenger',
         position: IMenuPosition.Middle,
-        name: 'AiMessengerWithOrgName',
-        path: '//o/:orgName/ai-messenger',
+        name: 'AiMessengerAppWithOrgAndChannelId',
+        path: '//o/:orgName/ai-messenger/app/:id',
     },
+
     // {
     //     exact: false,
     //     icon: 'AiOutlineInbox',
@@ -124,8 +134,8 @@ const selectedRoutes = [
     'direct-message',
     'ai-messenger',
     'ai-messenger-with-org-name',
-    'ai-messenger-with-channel-id',
-    'ai-messenger-with-message-app',
+    'ai-messenger-app-with-channel-id',
+    'ai-messenger-app-with-org-and-channel-id',
     'ai-messenger-with-preview',
 ];
 

package/src/container/AiLandingInput.tsx

@@ -121,12 +121,16 @@ const AiLandingInput: React.FC = () => {
                                         setIsCreatingChannel(false);
                                         return;
                                     }
-                                    console.log('orgName', orgName);
-                                    const aiMessengerPath = orgName
+
+                                    const basePath = orgName
                                         ? config.AI_MESSENGER_PATH.replace(':orgName', orgName)
                                         : config.AI_MESSENGER_PATH;
-                                    console.log('aiMessengerPath', aiMessengerPath);
-                                    navigate(`${aiMessengerPath}?id=${id}`, { replace: true });
+
+                                    const targetPath = basePath.includes(':id')
+                                        ? basePath.replace(':id', channelId)
+                                        : `${basePath.replace(/\/+$/, '')}/${channelId}`;
+
+                                    navigate(targetPath, { replace: true });
                                     setIsCreatingChannel(false);
                                 },
                                 onError: (error: any) => {

package/src/container/InboxAiMessagesLoader.tsx

@@ -18,7 +18,8 @@ const InboxWithAiLoaderOutlet = (props: InboxWithAiLoaderOutletProps) => {
     const location = useLocation();
     const { messages, setMessages, selectedPost, setSelectedPost, setIsLoading, isLoading } = useOutletContext() as any;
     const urlParams = location?.search ? new URLSearchParams(location.search) : null;
-    const channelId = urlParams?.get('id');
+    const { id: pathChannelId } = useParams();
+    const channelId = urlParams?.get('id') || pathChannelId;
     const user: any = useSelector<Store.Auth, IUserState>(userSelector, shallowEqual);
 
     return (

package/src/module.tsx

@@ -20,10 +20,10 @@ export default new Feature({
         //     name: `${MESSAGE_SLOT_FILL_NAME}2`,
         //     render: ChatMessageFill2,
         // },
-        {
-            name: 'inbox-with-ai-right-sidebar-1',
-            render: RightSidebarFill,
-        },
+        // {
+        //     name: 'inbox-with-ai-right-sidebar-1',
+        //     render: RightSidebarFill,
+        // },
         // {
         //     name: 'inbox-with-ai-right-sidebar-2',
         //     render: RightSidebarFill2,

package/src/templates/InboxWithAi.tsx

@@ -127,7 +127,6 @@ const InboxWithAiInternal = (props: InboxProps) => {
 
                 const response = await recreateSandbox({
                     variables: {
-                        projectId: channelId,
                         messageId,
                     },
                 });