@admin-layout/tailwind-chat-pro 12.2.4-alpha.102

package/lib/routes.json

@@ -0,0 +1 @@
+[]

package/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "@admin-layout/tailwind-chat-pro",
+    "version": "12.2.4-alpha.102",
+    "description": "Customizable base chat / messages container UI (plan mode). The message renderer is injectable, so consumers plug in their own message-group component.",
+    "license": "ISC",
+    "author": "CDMBase LLC",
+    "type": "module",
+    "main": "lib/index.js",
+    "module": "lib/index.js",
+    "typings": "lib/index.d.ts",
+    "scripts": {
+        "build": "yarn build:clean && yarn build:lib",
+        "build:clean": "rimraf lib",
+        "build:lib": "rollup -c rollup.config.mjs",
+        "build:lib:watch": "yarn build:lib -- --watch",
+        "jest": "./node_modules/.bin/jest",
+        "prepublish": "yarn build",
+        "test": "cross-env ENV_FILE=../../config/test/test.env jest",
+        "test:debug": "npm test -- --runInBand",
+        "test:watch": "npm test -- --watch",
+        "watch": "yarn build:lib:watch"
+    },
+    "dependencies": {
+        "@admin-layout/tailwind-ui": "12.2.4-alpha.102",
+        "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
+        "marked": "7.0.5",
+        "react-markdown": "^10.1.0",
+        "remark-breaks": "^4.0.0",
+        "remark-gfm": "^4.0.1"
+    },
+    "devDependencies": {
+        "common": "12.2.4-alpha.85"
+    },
+    "peerDependencies": {
+        "@admin-layout/tailwind-ui": "12.2.4-alpha.98",
+        "@common-stack/components-pro": "*",
+        "common": "12.2.4-alpha.85",
+        "react": ">=16.14.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "ed86766ff49c78ad32dad10b534d477bead62e9d",
+    "typescript": {
+        "definition": "lib/index.d.ts"
+    }
+}

package/rollup.config.mjs

@@ -0,0 +1,34 @@
+import { createRollupConfig } from '../../../rollup.config.base.mjs';
+
+const additionalPlugins = [];
+
+export default (commandLineArgs) => {
+    const isWatchMode = commandLineArgs.watch;
+    return [
+        createRollupConfig(
+            {
+                input: ['src/index.ts'],
+                plugins: [
+                    ...additionalPlugins,
+                ],
+                output: [
+                    {
+                        dir: 'lib',
+                        format: 'es',
+                        name: 'tailwind-chat-pro',
+                        compact: true,
+                        exports: 'named',
+                        sourcemap: true,
+                        preserveModules: true,
+                        chunkFileNames: '[name]-[hash].[format].js',
+                        globals: { react: 'React' },
+                    },
+                ],
+            },
+            {
+                isWatchMode,
+                generateRoutesJSON: true,
+            },
+        ),
+    ];
+};

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './messages-container-ui';

package/src/components/messages-container-ui/DefaultInputToolBar.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { InputToolBar } from '@admin-layout/tailwind-ui';
+import type { PlanModeViewInputToolbarProps } from './types';
+
+export interface DefaultInputToolBarProps extends PlanModeViewInputToolbarProps {
+    placeholder?: string;
+    /** When true, the send button shows a stop affordance (wired to onStop). */
+    isLoading?: boolean;
+    onStop?: () => void;
+    className?: string;
+}
+
+/**
+ * DefaultInputToolBar — the input composer used when no `renderInputToolbar` is
+ * provided. It wraps `@admin-layout/tailwind-ui`'s `InputToolBar` (the shared
+ * "ai-tool-box") wired to the base's toolbar props: a built-in textarea
+ * (Enter sends, Shift+Enter newlines) plus the mic/send/stop button.
+ *
+ * Consumers that need the richer composer (mode switcher, templates, attachments,
+ * project settings, …) pass their own `renderInputToolbar` instead.
+ */
+export const DefaultInputToolBar: React.FC<DefaultInputToolBarProps> = ({
+    value,
+    onChange,
+    onSend,
+    disabled = false,
+    placeholder = 'Message',
+    isLoading = false,
+    onStop,
+    className,
+}) => {
+    const hasContent = value.trim().length > 0;
+
+    return (
+        <InputToolBar
+            className={className}
+            inputConfig={{
+                value,
+                onChange: (e) => onChange(e.target.value),
+                placeholder,
+                disabled,
+                onKeyDown: (e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        if (hasContent && !disabled && !isLoading) onSend();
+                    }
+                },
+            }}
+            micSendButton={{
+                hasContent,
+                onSend,
+                onMic: () => {
+                    /* voice input not wired in the base default */
+                },
+                disabled,
+                isLoading,
+                onStop: isLoading ? onStop : undefined,
+            }}
+        />
+    );
+};
+
+export default DefaultInputToolBar;

package/src/components/messages-container-ui/DefaultMessageGroup.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import clsx from 'clsx';
+import type { MessageGroupRenderProps } from './types';
+
+const ASSISTANT_BUBBLE_BG = 'bg-card';
+const USER_BUBBLE_BG = 'bg-indigo-50';
+const BORDER_COLOR = 'border-border';
+
+/**
+ * DefaultMessageGroup — the base renderer used when no `MessageGroupComponent`
+ * is injected. Renders the post's text in a left/right aligned bubble with an
+ * optional author name, avatar and timestamp. Whitespace is preserved so
+ * plain-text replies read naturally.
+ *
+ * Consumers that need rich rendering (markdown, code blocks, media/travel/
+ * workflow widget cards, …) inject their own component via
+ * `MessagesContainerUI`'s `MessageGroupComponent` prop — e.g. messenger-box's
+ * `ModernMessageGroupComponent`.
+ */
+export const DefaultMessageGroup: React.FC<MessageGroupRenderProps> = ({
+    messages,
+    onMessageClick,
+    showAuthorName = false,
+    showAvatar = false,
+    showTimestamp = false,
+}) => {
+    const post = messages?.[0];
+    if (!post) return null;
+
+    const role = post?.propsConfiguration?.contents?.role;
+    const isUser = role === 'USER' || role === 'user' || post?.author?.isCurrentUser === true;
+    const text: string = typeof post?.message === 'string' ? post.message : '';
+    const author = post?.author ?? {};
+    const name: string = author.fullName || author.givenName || author.username || (isUser ? 'You' : 'Assistant');
+    const picture: string | null = author.picture ?? null;
+    const created = post?.createdAt ? new Date(post.createdAt) : null;
+    const timeLabel = created && !Number.isNaN(created.getTime()) ? created.toLocaleTimeString() : '';
+
+    return (
+        <div className={clsx('flex w-full', isUser ? 'justify-end' : 'justify-start')}>
+            <div className={clsx('flex max-w-[85%] gap-2', isUser ? 'flex-row-reverse' : 'flex-row')}>
+                {showAvatar && (
+                    <div className="flex-shrink-0">
+                        {picture ? (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            <img src={picture} alt={name} className="w-7 h-7 rounded-full object-cover" />
+                        ) : (
+                            <div className="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center text-xs font-medium text-gray-600">
+                                {name.charAt(0).toUpperCase()}
+                            </div>
+                        )}
+                    </div>
+                )}
+                <div className={clsx('min-w-0', isUser ? 'text-right' : 'text-left')}>
+                    {showAuthorName && <div className="mb-0.5 text-xs font-medium text-gray-500">{name}</div>}
+                    <div
+                        onClick={onMessageClick ? () => onMessageClick(post) : undefined}
+                        className={clsx(
+                            'inline-block rounded-2xl px-4 py-2.5 text-[15px] leading-relaxed text-foreground',
+                            'whitespace-pre-wrap break-words border',
+                            BORDER_COLOR,
+                            isUser ? USER_BUBBLE_BG : ASSISTANT_BUBBLE_BG,
+                            onMessageClick && 'cursor-pointer',
+                        )}
+                    >
+                        {text}
+                    </div>
+                    {showTimestamp && timeLabel && <div className="mt-0.5 text-[11px] text-gray-400">{timeLabel}</div>}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DefaultMessageGroup;

package/src/components/messages-container-ui/ErrorFixCard.tsx

@@ -0,0 +1,239 @@
+import React, { useState } from 'react';
+
+const IconAlertTriangle: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+    >
+        <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+        <line x1="12" y1="9" x2="12" y2="13" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+);
+
+const IconRefreshCw: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+    >
+        <polyline points="23 4 23 10 17 10" />
+        <polyline points="1 20 1 14 7 14" />
+        <path d="M3.51 9a9 9 0 0114.13-3.36L23 10" />
+        <path d="M20.49 15a9 9 0 01-14.13 3.36L1 14" />
+    </svg>
+);
+
+const IconCode: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+    >
+        <polyline points="16 18 22 12 16 6" />
+        <polyline points="8 6 2 12 8 18" />
+    </svg>
+);
+
+const IconExternalLink: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...props}
+    >
+        <path d="M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+        <polyline points="15 3 21 3 21 9" />
+        <line x1="10" y1="14" x2="21" y2="3" />
+    </svg>
+);
+
+interface ErrorFixCardProps {
+    error: any;
+    onFixError: (errorMessage: string) => Promise<void>;
+    currentFiles?: Record<string, string>;
+    isFixing?: boolean;
+}
+
+export const ErrorFixCard: React.FC<ErrorFixCardProps> = ({ error, onFixError, currentFiles, isFixing = false }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isFixingError, setIsFixingError] = useState(false);
+
+    const handleFixError = async () => {
+        setIsFixingError(true);
+        try {
+            const errorContext = `
+ERROR DETECTED IN SANDBOX:
+
+Error Type: ${error.errorType}
+Timestamp: ${error.timestamp}
+Sandbox ID: ${error.sandboxId}
+
+Error Message:
+${error.message}
+
+${error.stack ? `Stack Trace:\n${error.stack}` : ''}
+
+${
+    currentFiles && Object.keys(currentFiles).length > 0
+        ? `
+Current Files in Project:
+${Object.entries(currentFiles)
+    .map(
+        ([path, content]) => `
+--- ${path} ---
+${content}
+`,
+    )
+    .join('\n')}
+`
+        : ''
+}
+
+Please analyze this error and fix the code. Make sure to:
+1. Identify the root cause of the error
+2. Update the necessary files to resolve the issue
+3. Ensure the fix maintains the existing functionality
+4. Test that the solution compiles and runs correctly
+`.trim();
+
+            await onFixError(errorContext);
+        } catch (error) {
+            console.error('Failed to trigger error fix:', error);
+        } finally {
+            setIsFixingError(false);
+        }
+    };
+
+    const getErrorTypeColor = (errorType: string) => {
+        switch (errorType) {
+            case 'COMPILATION_ERROR':
+                return 'text-red-600 bg-red-50 border-red-200';
+            case 'RUNTIME_ERROR':
+                return 'text-orange-600 bg-orange-50 border-orange-200';
+            case 'DEPENDENCY_ERROR':
+                return 'text-yellow-600 bg-yellow-50 border-yellow-200';
+            case 'SERVER_START_ERROR':
+                return 'text-purple-600 bg-purple-50 border-purple-200';
+            case 'SANDBOX_DISCONNECTED':
+                return 'text-gray-600 bg-gray-50 border-gray-200';
+            case 'TEST_ERROR':
+                return 'text-blue-600 bg-blue-50 border-blue-200';
+            default:
+                return 'text-red-600 bg-red-50 border-red-200';
+        }
+    };
+
+    const formatErrorType = (errorType: string) => {
+        return errorType
+            .replace(/_/g, ' ')
+            .toLowerCase()
+            .replace(/\b\w/g, (l) => l.toUpperCase());
+    };
+
+    return (
+        <div className="flex w-full justify-start mb-2">
+            <div
+                className={`rounded-lg p-2 border w-fit max-w-[75%] min-w-0 break-all overflow-hidden ${getErrorTypeColor(
+                    error.errorType,
+                )}`}
+            >
+                <div className="flex items-start justify-between mb-1">
+                    <div className="flex items-center space-x-1">
+                        <IconAlertTriangle className="w-3 h-3 text-red-600 flex-shrink-0" />
+                        <span className="font-semibold text-xs">{formatErrorType(error.errorType)}</span>
+                        <span className="text-xs opacity-60">{new Date(error.timestamp).toLocaleTimeString()}</span>
+                        {error.url && (
+                            <a
+                                href={error.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-xs hover:underline flex items-center space-x-1"
+                            >
+                                <IconExternalLink className="w-3 h-3" />
+                                <span>View Sandbox</span>
+                            </a>
+                        )}
+                    </div>
+                </div>
+
+                <div className="text-sm mb-3">
+                    <div
+                        className="break-words whitespace-pre-wrap font-mono text-xs leading-relaxed overflow-hidden"
+                        style={{
+                            display: '-webkit-box',
+                            WebkitLineClamp: isExpanded ? 'none' : 3,
+                            WebkitBoxOrient: 'vertical',
+                            maxHeight: isExpanded ? 'none' : '3.6em',
+                        }}
+                    >
+                        {error.message}
+                    </div>
+                    {error.message.length > 150 && (
+                        <button
+                            onClick={() => setIsExpanded(!isExpanded)}
+                            className="text-xs hover:underline mt-1 font-sans"
+                        >
+                            {isExpanded ? 'Show less' : 'Show more'}
+                        </button>
+                    )}
+                </div>
+
+                {isExpanded && error.stack && (
+                    <div className="mt-3 p-3 bg-black bg-opacity-10 rounded text-xs font-mono">
+                        <div className="flex items-center space-x-2 mb-2">
+                            <IconCode className="w-3 h-3" />
+                            <span className="font-semibold">Stack Trace</span>
+                        </div>
+                        <pre className="whitespace-pre-wrap text-xs break-all">{error.stack}</pre>
+                    </div>
+                )}
+
+                {error.fixable && (
+                    <div className="mt-4 flex justify-start">
+                        <button
+                            onClick={handleFixError}
+                            disabled={isFixingError || isFixing}
+                            className={`
+                  flex items-center space-x-2 px-4 py-2 rounded-md text-sm font-medium
+                  transition-colors duration-200
+                  ${
+                      isFixingError || isFixing
+                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                          : 'bg-red-600 text-white hover:bg-red-700 shadow-sm hover:shadow-md'
+                  }
+                `}
+                        >
+                            <IconRefreshCw className={`w-4 h-4 ${isFixingError || isFixing ? 'animate-spin' : ''}`} />
+                            <span>{isFixingError || isFixing ? 'Fixing...' : 'Fix Error'}</span>
+                        </button>
+                    </div>
+                )}
+
+                {!error.fixable && (
+                    <div className="mt-3 text-xs opacity-75">
+                        This error may require manual intervention or environment changes.
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default ErrorFixCard;

package/src/components/messages-container-ui/FilesList.tsx

@@ -0,0 +1,89 @@
+import React, { useMemo, useState } from 'react';
+import { useFileUrlQuery } from 'common/graphql';
+
+interface FilesListProps {
+    files: any[];
+    uploaded?: boolean;
+    FileElementProps?: Omit<FileElementProps, 'file' | 'uploaded' | 'onRemove'>;
+    onRemove?: () => Promise<void>;
+}
+
+interface FileElementProps {
+    file: any;
+    uploaded: boolean;
+    width?: number;
+    height?: number;
+    onRemove?: () => Promise<void>;
+}
+
+export function FilesList({ files, uploaded = false }: FilesListProps) {
+    return (
+        <div className="flex flex-row">
+            {files.map((file, index) => (
+                <FilesList.FileElement key={`${index}`} uploaded={uploaded} file={file} />
+            ))}
+        </div>
+    );
+}
+
+FilesList.FileElement = ({ file, uploaded, width = 120, height = 120 }: FileElementProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const src = useMemo(() => (uploaded ? file.url : URL.createObjectURL(file)), [file, uploaded]);
+    const { data } = useFileUrlQuery({
+        variables: {
+            id: file?.id,
+        },
+        skip: !file?.id,
+    });
+
+    const onOpen = () => setIsOpen(true);
+    const onClose = () => setIsOpen(false);
+
+    return (
+        <>
+            <img
+                className="cursor-pointer m-2 object-cover rounded"
+                style={{ height: `${height}px`, width: `${width}px` }}
+                src={src}
+                onClick={onOpen}
+                alt="File preview"
+            />
+
+            {/* Modal */}
+            {isOpen && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+                    {/* Overlay */}
+                    <div className="fixed inset-0 bg-black bg-opacity-75" onClick={onClose} />
+
+                    {/* Modal Content */}
+                    <div className="relative bg-white rounded-lg shadow-xl max-w-4xl max-h-[90vh] overflow-hidden">
+                        {/* Close Button */}
+                        <button
+                            onClick={onClose}
+                            className="absolute top-4 right-4 z-10 p-2 rounded-full bg-black bg-opacity-50 hover:bg-opacity-70 transition-all duration-200"
+                        >
+                            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+
+                        {/* Image Container */}
+                        <div className="p-4 flex items-center justify-center">
+                            <img
+                                src={data?.fileInfo?.url || src}
+                                alt="File full view"
+                                className="max-w-full max-h-[80vh] object-contain cursor-pointer"
+                                onClick={onClose}
+                            />
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};