@messenger-box/tailwind-ui-inbox 10.0.3-alpha.71 → 10.0.3-alpha.73

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

@@ -1,14 +1,18 @@
 import React from 'react';
 
 interface IPlainMessageProps {
-    message: string;
+    message: string; // may contain HTML
     index: number;
 }
 
 export const PlainMessage = ({ message, index }: IPlainMessageProps) => {
     return (
         <div className="w-full flex justify-center mb-7" key={`msgList_${index}`}>
-            <p className="text-sm font-bold">{message}</p>
+            {/* <p className="text-sm font-bold">{message}</p> */}
+            <div
+                className="text-sm font-bold whitespace-pre-wrap prose prose-sm max-w-none"
+                dangerouslySetInnerHTML={{ __html: message }}
+            />
         </div>
     );
 };

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

@@ -57,6 +57,229 @@ export const groupMessagesByUserAndTime = (messages: IPost[], timeThresholdMinut
     return groups;
 };
 
+// Detect if a string likely contains HTML
+const isProbablyHTML = (value: string): boolean => {
+    if (!value) return false;
+    return /<\/?[a-z][\s\S]*>/i.test(value.trim());
+};
+
+// Minimal sanitizer without extra deps
+const sanitizeHtml = (html: string): string => {
+    try {
+        if (typeof window === 'undefined' || typeof window.DOMParser === 'undefined') {
+            return html
+                .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')
+                .replace(/<style[\s\S]*?>[\s\S]*?<\/style>/gi, '')
+                .replace(/on\w+\s*=\s*"[^"]*"/gi, '')
+                .replace(/on\w+\s*=\s*'[^']*'/gi, '')
+                .replace(/on\w+\s*=\s*[^\s>]+/gi, '')
+                .replace(/javascript:/gi, '');
+        }
+
+        const parser = new window.DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        const dangerousTags = ['script', 'style', 'iframe', 'object', 'embed', 'link', 'meta'];
+        dangerousTags.forEach((tag) => {
+            doc.querySelectorAll(tag).forEach((el) => el.remove());
+        });
+
+        const walker = doc.createTreeWalker(doc.body, (NodeFilter as any).SHOW_ELEMENT);
+        let node = walker.nextNode() as Element | null;
+        while (node) {
+            Array.from(node.attributes).forEach((attr) => {
+                const name = attr.name.toLowerCase();
+                const value = (attr.value || '').toLowerCase();
+                if (name.startsWith('on') || value.startsWith('javascript:')) {
+                    node?.removeAttribute(attr.name);
+                }
+                if ((name === 'src' || name === 'href') && !/^https?:|^\/.*/.test(attr.value)) {
+                    node?.removeAttribute(attr.name);
+                }
+            });
+            node = walker.nextNode() as Element | null;
+        }
+
+        return doc.body.innerHTML;
+    } catch (e) {
+        return html.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '');
+    }
+};
+
+// Render markdown-like content with fenced code blocks
+const FormattedMessageContent: React.FC<{ content: string }> = ({ content }) => {
+    if (!content) return null;
+    // Normalize escaped fences (\``` -> ```)
+    // Unescape any backslash-escaped backticks so Markdown fences work
+    const normalized = content.replace(/\\`/g, '`');
+    const blocks = normalized.split('\n\n').filter((b) => b.trim());
+    return (
+        <div className="space-y-3">
+            {blocks.map((block, index) => {
+                const trimmed = block.trim();
+
+                // Fenced code anywhere in block
+                if (trimmed.includes('```')) {
+                    const parts: React.ReactNode[] = [];
+                    const pushText = (t: string, key: string) => {
+                        const txt = (t || '').trim();
+                        if (!txt) return;
+                        if (txt.startsWith('# ')) {
+                            parts.push(
+                                <h1 key={key} className="text-xl font-semibold text-gray-900">
+                                    {txt.substring(2)}
+                                </h1>,
+                            );
+                            return;
+                        }
+                        if (txt.startsWith('## ')) {
+                            parts.push(
+                                <h2 key={key} className="text-base font-semibold text-gray-800">
+                                    {txt.substring(3)}
+                                </h2>,
+                            );
+                            return;
+                        }
+                        if (txt.startsWith('### ')) {
+                            parts.push(
+                                <h3 key={key} className="text-sm font-medium text-gray-700">
+                                    {txt.substring(4)}
+                                </h3>,
+                            );
+                            return;
+                        }
+                        if (txt.startsWith('- ') || txt.startsWith('• ')) {
+                            const items = txt.split('\n').filter((l) => l.trim());
+                            parts.push(
+                                <ul key={key} className="list-disc pl-5 space-y-1">
+                                    {items.map((it, i) => (
+                                        <li key={`${key}-li-${i}`} className="text-gray-700">
+                                            {it.replace(/^[\u2212\-•]\s*/, '')}
+                                        </li>
+                                    ))}
+                                </ul>,
+                            );
+                            return;
+                        }
+                        if (txt.includes('**') || txt.includes('`')) {
+                            const formatted = txt
+                                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                                .replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-1 rounded">$1</code>');
+                            parts.push(
+                                <div
+                                    key={key}
+                                    className="text-gray-700"
+                                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(formatted) }}
+                                />,
+                            );
+                            return;
+                        }
+                        parts.push(
+                            <p key={key} className="text-gray-700 whitespace-pre-wrap">
+                                {txt}
+                            </p>,
+                        );
+                    };
+
+                    const codeRegex = /```([\w-]*)\n?([\s\S]*?)```/g;
+                    let lastIndex = 0;
+                    let m: RegExpExecArray | null;
+                    while ((m = codeRegex.exec(trimmed)) !== null) {
+                        const [full, lang, code] = m;
+                        const before = trimmed.slice(lastIndex, m.index);
+                        pushText(before, `${index}-before-${lastIndex}`);
+                        const language = (lang || '').trim() || 'code';
+                        parts.push(
+                            <div
+                                key={`${index}-code-${m.index}`}
+                                className="border border-gray-200 rounded overflow-hidden"
+                            >
+                                <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide bg-gray-100 text-gray-600">
+                                    {language}
+                                </div>
+                                <div className="bg-gray-900 p-3 overflow-x-auto">
+                                    <pre className="text-xs text-gray-100 font-mono leading-relaxed not-prose">
+                                        <code>{code}</code>
+                                    </pre>
+                                </div>
+                            </div>,
+                        );
+                        lastIndex = m.index + full.length;
+                    }
+                    const after = trimmed.slice(lastIndex);
+                    pushText(after, `${index}-after`);
+                    return (
+                        <div key={index} className="space-y-2">
+                            {parts}
+                        </div>
+                    );
+                }
+
+                if (isProbablyHTML(trimmed)) {
+                    return (
+                        <div
+                            key={index}
+                            className="prose prose-sm max-w-none"
+                            dangerouslySetInnerHTML={{ __html: sanitizeHtml(trimmed) }}
+                        />
+                    );
+                }
+
+                if (trimmed.startsWith('### '))
+                    return (
+                        <h3 key={index} className="text-sm font-medium text-gray-700">
+                            {trimmed.substring(4)}
+                        </h3>
+                    );
+                if (trimmed.startsWith('## '))
+                    return (
+                        <h2 key={index} className="text-base font-semibold text-gray-800">
+                            {trimmed.substring(3)}
+                        </h2>
+                    );
+                if (trimmed.startsWith('# '))
+                    return (
+                        <h1 key={index} className="text-xl font-semibold text-gray-900">
+                            {trimmed.substring(2)}
+                        </h1>
+                    );
+
+                if (trimmed.startsWith('- ') || trimmed.startsWith('• ')) {
+                    const items = trimmed.split('\n').filter((l) => l.trim());
+                    return (
+                        <ul key={index} className="list-disc pl-5 space-y-1">
+                            {items.map((it, i) => (
+                                <li key={`${index}-li-${i}`} className="text-gray-700">
+                                    {it.replace(/^[\u2212\-•]\s*/, '')}
+                                </li>
+                            ))}
+                        </ul>
+                    );
+                }
+
+                if (trimmed.includes('**') || trimmed.includes('`')) {
+                    const formatted = trimmed
+                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                        .replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-1 rounded">$1</code>');
+                    return (
+                        <div
+                            key={index}
+                            className="text-gray-700"
+                            dangerouslySetInnerHTML={{ __html: sanitizeHtml(formatted) }}
+                        />
+                    );
+                }
+
+                return (
+                    <p key={index} className="text-gray-700 whitespace-pre-wrap">
+                        {trimmed}
+                    </p>
+                );
+            })}
+        </div>
+    );
+};
+
 const MessageGroup: React.FC<MessageGroupProps> = ({
     author,
     messages,
@@ -78,6 +301,12 @@ const MessageGroup: React.FC<MessageGroupProps> = ({
         return format(date, 'h:mm a');
     };
 
+    // 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');
+
     return (
         <div
             className={`group hover:bg-white hover:bg-opacity-60 rounded transition-colors ${
@@ -89,30 +318,34 @@ const MessageGroup: React.FC<MessageGroupProps> = ({
                     isDesktopView ? 'space-x-4' : isSmallScreen ? 'space-x-2' : 'space-x-3'
                 }`}
             >
-                {/* Avatar - show for all messages */}
-                <div className="flex-shrink-0 mt-0.5">
-                    <img
-                        className={`rounded-lg cursor-pointer hover:opacity-80 transition-opacity ${
-                            isDesktopView ? 'w-12 h-12' : isSmallScreen ? 'w-8 h-8' : 'w-10 h-10'
-                        }`}
-                        src={author?.picture || '/default-avatar.svg'}
-                        alt={authorName}
-                        onClick={() => onOpen(firstMessage)}
-                        onError={(e) => {
-                            e.currentTarget.src = '/default-avatar.svg';
-                        }}
-                    />
-                </div>
+                {/* Avatar - Only show for non-system messages */}
+                {!isSystemMessage && (
+                    <div className="flex-shrink-0 mt-0.5">
+                        <img
+                            className={`rounded-lg cursor-pointer hover:opacity-80 transition-opacity ${
+                                isDesktopView ? 'w-12 h-12' : isSmallScreen ? 'w-8 h-8' : 'w-10 h-10'
+                            }`}
+                            src={author?.picture || '/default-avatar.svg'}
+                            alt={authorName}
+                            onClick={() => onOpen(firstMessage)}
+                            onError={(e) => {
+                                e.currentTarget.src = '/default-avatar.svg';
+                            }}
+                        />
+                    </div>
+                )}
 
                 <div className="flex-1 min-w-0 overflow-hidden">
-                    {/* Author name and timestamp - show for all messages */}
-                    <div className="flex items-center space-x-2 mb-1">
-                        <span className="text-sm font-semibold text-gray-900 truncate">{authorName}</span>
-                        <span className="text-xs text-gray-500 flex-shrink-0">
-                            {formatTime(firstMessage.createdAt)}
-                        </span>
-                        {isOwnMessage && <span className="text-xs text-gray-400 italic flex-shrink-0">(you)</span>}
-                    </div>
+                    {/* Author name and timestamp - Only show for non-system messages */}
+                    {!isSystemMessage && (
+                        <div className="flex items-center space-x-2 mb-1">
+                            <span className="text-sm font-semibold text-gray-900 truncate">{authorName}</span>
+                            <span className="text-xs text-gray-500 flex-shrink-0">
+                                {formatTime(firstMessage.createdAt)}
+                            </span>
+                            {isOwnMessage && <span className="text-xs text-gray-400 italic flex-shrink-0">(you)</span>}
+                        </div>
+                    )}
 
                     {/* Messages in the group - single line for each message */}
                     <div className="space-y-0.5">
@@ -121,6 +354,7 @@ const MessageGroup: React.FC<MessageGroupProps> = ({
                                 key={message.id}
                                 message={message}
                                 isOwnMessage={isOwnMessage}
+                                isSystemMessage={isSystemMessage}
                                 isFirstInGroup={index === 0}
                                 isLastInGroup={index === messages.length - 1}
                                 showTimestamp={isOwnMessage && index === 0}
@@ -147,11 +381,13 @@ interface MessageBubbleProps {
     totalInGroup: number;
     authorName: string;
     formatTime: (timestamp: string) => string;
+    isSystemMessage: boolean;
 }
 
 const MessageBubble: React.FC<MessageBubbleProps> = ({
     message,
     isOwnMessage,
+    isSystemMessage,
     isFirstInGroup,
     isLastInGroup,
     showTimestamp,
@@ -161,45 +397,61 @@ const MessageBubble: React.FC<MessageBubbleProps> = ({
     formatTime,
 }) => {
     const handleClick = () => {
-        onMessageClick?.(message);
+        if (!isSystemMessage) {
+            onMessageClick?.(message);
+        }
     };
 
     // All messages use the same format (Slack style - left aligned)
     return (
-        <div className="py-1 hover:bg-gray-50 hover:bg-opacity-50 rounded px-1 sm:px-2 -mx-1 sm:-mx-2 group relative">
-            <div
-                className="text-sm text-gray-900 cursor-pointer hover:bg-gray-100 px-1 sm:px-2 py-1 rounded"
-                onClick={handleClick}
-            >
-                {/* Show timestamp on hover */}
-                <span className="text-xs text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity absolute right-1 sm:right-2 top-1">
-                    {formatTime(message.createdAt)}
-                </span>
-
-                {message.message && (
-                    <div className="whitespace-pre-wrap break-words leading-relaxed pr-12 sm:pr-16">
-                        {message.message}
-                    </div>
-                )}
+        <div
+            className={`py-1 hover:bg-gray-50 hover:bg-opacity-50 rounded px-1 sm:px-2 -mx-1 sm:-mx-2 group ${
+                isSystemMessage ? '' : 'cursor-pointer'
+            }`}
+        >
+            <div className="flex items-start justify-between gap-2">
+                <div
+                    className={`text-sm hover:bg-gray-100 px-1 sm:px-2 py-1 rounded flex-1 ${
+                        isSystemMessage ? 'text-gray-800' : 'text-gray-900 cursor-pointer'
+                    }`}
+                    onClick={handleClick}
+                >
+                    {message.message && (
+                        <div className="break-words leading-relaxed">
+                            {message.message.includes('```') ? (
+                                <FormattedMessageContent content={message.message} />
+                            ) : isProbablyHTML(message.message) ? (
+                                <div
+                                    className="prose prose-sm max-w-none"
+                                    dangerouslySetInnerHTML={{ __html: sanitizeHtml(message.message) }}
+                                />
+                            ) : (
+                                <FormattedMessageContent content={message.message} />
+                            )}
+                        </div>
+                    )}
 
-                {message.files?.totalCount > 0 && (
-                    <div className="mt-2 pr-12 sm:pr-16">
-                        <FilesList uploaded files={message.files.data} />
-                    </div>
-                )}
+                    {message.files?.totalCount > 0 && (
+                        <div className="mt-2">
+                            <FilesList uploaded files={message.files.data} />
+                        </div>
+                    )}
+                </div>
 
-                {/* Show delivery status for own messages */}
-                {/* {isOwnMessage && message.isDelivered !== undefined && (
-                    <div className="text-xs text-gray-400 mt-1 clear-both">
-                        {message.isDelivered 
-                            ? message.isRead 
-                                ? '✓✓ Read' 
-                                : '✓✓ Delivered'
-                            : '✓ Sent'
-                        }
-                    </div>
-                )} */}
+                {/* Show timestamp to the right of message */}
+                <span className="text-xs text-gray-500 flex-shrink-0 mt-1">{formatTime(message.createdAt)}</span>
             </div>
+
+            {/* Show delivery status for own messages */}
+            {/* {isOwnMessage && message.isDelivered !== undefined && (
+                <div className="text-xs text-gray-400 mt-1 clear-both">
+                    {message.isDelivered 
+                        ? message.isRead 
+                            ? '✓✓ Read' 
+                            : '✓✓ Delivered'
+                        : '✓ Sent'}
+                </div>
+            )} */}
         </div>
     );
 };

package/src/components/InboxMessage/message-widgets/index.ts

@@ -1,2 +1,3 @@
 export { MessageSliceRenderer } from './MessageSliceRenderer';
 export { SlackLikeMessageGroup } from './SlackLikeMessageGroup';
+export { ModernMessageGroupComponent } from './ModernMessageGroup';

package/src/components/index.ts

@@ -3,6 +3,8 @@ export {
     LeftSidebar,
     RightSidebar,
     MessageInput,
+    MessageInputComponent,
+    InputComponent,
     Messages,
     CommonMessage,
     MessageSliceRenderer,
@@ -11,5 +13,7 @@ export {
     UploadImageButton,
     UserModalContent,
     ServiceInboxItem,
+    MessagesBuilderUi,
 } from './InboxMessage';
 export { ChatMessageFiller, ChatMessageFill2 } from './slot-fill';
+export { AIAgent } from './AIAgent';

package/src/compute.ts

@@ -25,7 +25,7 @@ export const messengerPageStore: IRouteModule[] | { [key: string]: any } = [
         component: () => import('./container/InboxWithLoader'),
         tab: 'Chat App',
         position: IMenuPosition.Middle,
-        // authority: [PreDefineAccountPermissions.secureUser],
+        //authority: [PreDefineAccountPermissions.secureUser],
         name: 'Inbox',
         path: '/o/:orgName/inbox',
     },
@@ -41,10 +41,91 @@ export const messengerPageStore: IRouteModule[] | { [key: string]: any } = [
         path: '//o/:orgName/direct-message/:id?/:postId?',
         // path: '/o/:orgName/inbox',
     },
+    // {
+    //     exact: false,
+    //     icon: 'AiOutlineInbox',
+    //     key: 'ai-messenger',
+    //     component: () => import('./container/AiInboxWithLoader'),
+    //     tab: 'DM',
+    //     position: IMenuPosition.Middle,
+    //     // authority: [PreDefineAccountPermissions.secureUser],
+    //     name: 'AiMessenger',
+    //     path: '//o/:orgName/ai-messenger/:id?/:postId?',
+    //     // path: '/o/:orgName/inbox',
+    // },
+    {
+        exact: false,
+        icon: 'AiOutlineInbox',
+        key: 'ai-messenger',
+        component: () => import('./container/InboxWithAiLoader'),
+        tab: 'Ai Messenger',
+        position: IMenuPosition.Middle,
+        name: 'AiMessenger',
+        path: '/ai-messenger',
+    },
+    {
+        exact: false,
+        icon: 'AiOutlineInbox',
+        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-with-channel-id',
+    //     component: () => import('./templates/InboxWithAi'),
+    //     tab: 'Ai Messenger',
+    //     position: IMenuPosition.Middle,
+    //     name: 'AiMessengerWithChannelId',
+    //     path: '//o?/:orgName?/ai-messenger/:id',
+    // },
+
+    //  {
+    //     exact: false,
+    //     icon: 'AiOutlineInbox',
+    //     key: 'messenger-ai',
+    //     component: () => import('./container/InboxAiLoader'),
+    //     tab: 'Ai Messenger',
+    //     position: IMenuPosition.Middle,
+    //     name: 'MessengerAi',
+    //     path: '/messenger-ai',
+    // },
+    {
+        exact: false,
+        icon: 'AiOutlineInbox',
+        key: 'ai-messenger-with-message-app',
+        component: () => import('./container/InboxAiMessagesLoader'),
+        tab: 'Ai Messenger',
+        position: IMenuPosition.Middle,
+        name: 'AiMessengerWithMessageApp',
+        path: '/ai-messenger/app',
+    },
+    // {
+    //     exact: false,
+    //     icon: 'AiOutlineInbox',
+    //     key: 'ai-messenger-with-preview',
+    //     component: () => import('./container/InboxWithAiLoader'),
+    //     tab: 'Ai Messenger',
+    //     position: IMenuPosition.Middle,
+    //     name: 'AiMessengerWithPreview',
+    //     path: '//o?/:orgName?/ai-messenger/app/:id/preview',
+    // },
 ];
 
 // get only selected Routes to work
-const selectedRoutes = ['inbox', 'direct-message'];
+const selectedRoutes = [
+    'inbox',
+    'direct-message',
+    'ai-messenger',
+    'ai-messenger-with-org-name',
+    'ai-messenger-with-channel-id',
+    'ai-messenger-with-message-app',
+    'ai-messenger-with-preview',
+];
 
 const filteredRoutes = getFilteredRoutes(messengerPageStore, selectedRoutes);
 

package/src/config/env-config.ts

@@ -4,8 +4,14 @@ import { getEnvironment } from '@common-stack/core';
 const env = getEnvironment();
 
 export const config = cleanEnv(env, {
+    CLIENT_URL: str({ default: 'http://localhost:3011' }),
     WEB_INBOX_MESSEGE_PATH: str({ default: 'inbox' }),
     WEB_THREAD_MESSEGE_PATH: str({ default: 'thread' }),
     MESSAGES_PER_PAGE: num({ devDefault: 10, default: 10 }),
     FILES_PER_MESSAGE: num({ default: 10 }),
+    VITE_OPENAI_API_KEY: str({ default: '' }),
+    VITE_ANTHROPIC_API_KEY: str({ default: '' }),
+    ANTHROPIC_API_KEY: str({ default: '' }),
+    NEWS_API_KEY: str({ default: '' }),
+    OPENAI_API_KEY: str({ default: '' }),
 });