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

package/lib/components/messages-container-ui/PlanModeView.js

@@ -0,0 +1,294 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useCallback,useMemo,useLayoutEffect,useEffect}from'react';import clsx from'clsx';import {AiAgentMessageRole,PostTypeEnum}from'common';import {DefaultMessageGroup}from'./DefaultMessageGroup.js';import {DefaultInputToolBar}from'./DefaultInputToolBar.js';const ASSISTANT_BUBBLE_BG = 'bg-white';
+const BORDER_COLOR = 'border-gray-200';
+const HIDE_SCROLLBAR_CSS = `
+/* Hide scrollbar while keeping scrollability */
+.ym-hide-scrollbar {
+  -ms-overflow-style: none; /* IE/Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.ym-hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+  width: 0;
+  height: 0;
+}
+`;
+const DEFAULT_ASSISTANT_AUTHOR = {
+  id: 'ai-assistant',
+  givenName: 'AI',
+  familyName: 'Assistant',
+  fullName: 'AI Assistant',
+  username: 'ai-assistant',
+  email: 'ai@assistant.com',
+  picture: null,
+  alias: [],
+  tokens: []
+};
+/** Default mapping of a PlanMessage to the post-like shape expected by message-group renderers. */
+function defaultPlanMessageToPost(msg, currentUser) {
+  const isUser = msg.role === 'user';
+  const author = msg.author ?? (isUser ? {
+    id: currentUser.id,
+    givenName: currentUser.givenName ?? currentUser.name ?? 'User',
+    familyName: currentUser.familyName ?? '',
+    fullName: currentUser.fullName ?? currentUser.name ?? 'User',
+    username: currentUser.username ?? currentUser.id,
+    email: currentUser.email ?? '',
+    picture: currentUser.picture ?? currentUser.avatar ?? null,
+    alias: currentUser.alias ?? [],
+    tokens: currentUser.tokens ?? []
+  } : DEFAULT_ASSISTANT_AUTHOR);
+  return {
+    id: msg.id,
+    message: msg.content,
+    author,
+    createdAt: msg.createdAt ?? new Date().toISOString(),
+    type: msg.type ?? PostTypeEnum.Aiassistant,
+    isDelivered: false,
+    isRead: false,
+    parentId: null,
+    fromServer: null,
+    updatedAt: msg.createdAt ?? new Date().toISOString(),
+    propsConfiguration: {
+      ...(msg.propsConfiguration ?? {
+        contents: {}
+      }),
+      contents: {
+        ...(msg.propsConfiguration?.contents ?? {}),
+        role: msg.propsConfiguration?.contents?.role ?? (isUser ? AiAgentMessageRole.User : AiAgentMessageRole.Assistant),
+        // Plan/build mode: consumers (e.g. ModernMessageBubble) read propsConfiguration.contents.mode
+        ...(msg.props?.mode != null ? {
+          mode: msg.props.mode
+        } : {})
+      }
+    },
+    props: msg.props ?? {},
+    files: msg.files ?? [],
+    replies: null,
+    channel: null,
+    isPinned: false
+  };
+}
+function PlanModeView({
+  messages,
+  streamingContent,
+  currentUser,
+  onSend,
+  disabled = false,
+  isLoading = false,
+  onStop,
+  showDate = false,
+  showAvatar = false,
+  showMessageBubbleBorder = false,
+  useInternalScroll = false,
+  scrollContainerRef,
+  scrollContainerClassName,
+  hideScrollbar = false,
+  contentClassName,
+  postContainerClassName,
+  className,
+  hideInputToolbar = false,
+  inputPlacement = 'bottom',
+  renderInputToolbar,
+  inputPlaceholder,
+  onOpen = () => {},
+  onMessageClick = () => {},
+  isDesktopView = false,
+  isSmallScreen = false,
+  sandboxErrors = [],
+  currentFiles = {},
+  onFixError,
+  error = null,
+  onRetry,
+  renderEmptyState,
+  scrollToBottomDeps,
+  showCopyDownloadOnCodeBlock = true,
+  MessageGroupComponent = DefaultMessageGroup,
+  renderStreamingContent,
+  mapMessageToPost = defaultPlanMessageToPost
+}) {
+  const [inputValue, setInputValue] = useState('');
+  const internalListRef = useRef(null);
+  const contentRef = useRef(null);
+  const shouldAutoScrollRef = useRef(true);
+  const setScrollContainerRef = useCallback(node => {
+    internalListRef.current = node;
+    if (!scrollContainerRef) return;
+    if (typeof scrollContainerRef === 'function') {
+      scrollContainerRef(node);
+      return;
+    }
+    // RefObject / MutableRefObject
+    scrollContainerRef.current = node;
+  }, [scrollContainerRef]);
+  const scrollToBottom = useCallback(() => {
+    const el = internalListRef.current;
+    if (el && shouldAutoScrollRef.current) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, []);
+  const handleSendFromInput = useCallback(() => {
+    const t = inputValue.trim();
+    if (!t) return;
+    onSend(t);
+    setInputValue('');
+  }, [inputValue, onSend]);
+  const inputToolbarProps = {
+    value: inputValue,
+    onChange: setInputValue,
+    onSend: handleSendFromInput,
+    disabled: disabled || isLoading
+  };
+  // Default the input composer to @admin-layout/tailwind-ui's InputToolBar (the shared
+  // "ai-tool-box"); consumers can override with `renderInputToolbar` for a richer composer.
+  const renderToolbar = renderInputToolbar ?? (p => jsx(DefaultInputToolBar, {
+    ...p,
+    isLoading: isLoading,
+    onStop: onStop,
+    placeholder: inputPlaceholder
+  }));
+  const currentUserForGroup = useMemo(() => ({
+    id: currentUser.id,
+    givenName: currentUser.givenName ?? currentUser.name ?? 'You',
+    familyName: currentUser.familyName ?? '',
+    fullName: currentUser.fullName ?? currentUser.name ?? 'You',
+    username: currentUser.username ?? currentUser.id,
+    email: currentUser.email ?? '',
+    picture: currentUser.picture ?? currentUser.avatar ?? null,
+    alias: currentUser.alias ?? [],
+    tokens: currentUser.tokens ?? []
+  }), [currentUser]);
+  const posts = useMemo(() => messages.map(m => mapMessageToPost(m, currentUser)), [messages, currentUser, mapMessageToPost]);
+  const isEmpty = posts.length === 0 && !streamingContent?.trim() && !isLoading;
+  const shouldInlineToolbar = inputPlacement === 'inlineWhenEmpty' && isEmpty;
+  const shouldRenderBottomToolbar = !hideInputToolbar && !shouldInlineToolbar;
+  // Auto-scroll to bottom while user stays near bottom.
+  useLayoutEffect(() => {
+    if (!useInternalScroll) return;
+    if (!shouldAutoScrollRef.current) return;
+    scrollToBottom();
+    const id = requestAnimationFrame(() => {
+      scrollToBottom();
+      requestAnimationFrame(scrollToBottom);
+    });
+    return () => cancelAnimationFrame(id);
+  }, [useInternalScroll, scrollToBottom, posts.length, streamingContent, isLoading]);
+  // When internal scroll is (re)enabled, force follow-to-bottom.
+  useEffect(() => {
+    if (!useInternalScroll) return;
+    shouldAutoScrollRef.current = true;
+    scrollToBottom();
+  }, [useInternalScroll, scrollToBottom]);
+  // When inner content grows (stream chunks, markdown expand), scroll to bottom if user was near bottom.
+  // Observing the content wrapper ensures we react to content height changes; the scroll container size often does not change.
+  useEffect(() => {
+    if (!useInternalScroll) return;
+    const el = contentRef.current;
+    if (!el) return;
+    if (typeof ResizeObserver === 'undefined') return;
+    const ro = new ResizeObserver(() => {
+      if (!shouldAutoScrollRef.current) return;
+      scrollToBottom();
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [useInternalScroll, scrollToBottom]);
+  // Parent-controlled scroll: when scrollToBottomDeps change (e.g. each stream chunk), force scroll to bottom.
+  useEffect(() => {
+    if (!useInternalScroll || !scrollToBottomDeps?.length) return;
+    scrollToBottom();
+    const id = requestAnimationFrame(() => {
+      scrollToBottom();
+    });
+    return () => cancelAnimationFrame(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: parent passes deps
+  }, scrollToBottomDeps ?? []);
+  const handleScroll = useCallback(() => {
+    const el = internalListRef.current;
+    if (!el) return;
+    const thresholdPx = 160;
+    const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    shouldAutoScrollRef.current = distanceFromBottom <= thresholdPx;
+  }, []);
+  return jsxs("div", {
+    className: clsx('flex flex-col flex-1 min-h-0 overflow-hidden', className),
+    children: [useInternalScroll && hideScrollbar && jsx("style", {
+      children: HIDE_SCROLLBAR_CSS
+    }), jsx("div", {
+      ref: setScrollContainerRef,
+      onScroll: useInternalScroll ? handleScroll : undefined,
+      className: useInternalScroll ? clsx('flex-1 min-h-0 overflow-y-auto', hideScrollbar && 'ym-hide-scrollbar', scrollContainerClassName) : scrollContainerClassName ?? '',
+      children: jsxs("div", {
+        ref: contentRef,
+        className: clsx('w-full pb-4 pt-2 space-y-3 px-4', contentClassName ?? ''),
+        children: [error && jsxs("div", {
+          className: "rounded-lg border border-red-200 bg-red-50 px-4 py-3 flex items-center justify-between gap-2",
+          children: [jsx("span", {
+            className: "text-sm text-red-800",
+            children: error
+          }), onRetry && jsx("button", {
+            type: "button",
+            onClick: onRetry,
+            className: "shrink-0 px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-100 rounded-md transition-colors",
+            children: "Retry"
+          })]
+        }), isEmpty && jsxs("div", {
+          className: "px-4 py-8 text-center",
+          children: [renderEmptyState ? renderEmptyState({
+            inputToolbarProps
+          }) : jsxs(Fragment, {
+            children: [jsx("div", {
+              className: "text-gray-500 text-lg font-medium mb-2",
+              children: "Describe your idea and I'll help you create it step by step"
+            }), jsx("div", {
+              className: "text-gray-400 text-sm",
+              children: "Start a new conversation by typing your message below"
+            })]
+          }), shouldInlineToolbar && jsx("div", {
+            className: "mt-6 text-left",
+            children: renderToolbar(inputToolbarProps)
+          })]
+        }), posts.map(post => jsx("div", {
+          className: clsx('mb-3', postContainerClassName),
+          children: jsx(MessageGroupComponent, {
+            messages: [post],
+            currentUser: currentUserForGroup,
+            onOpen: onOpen,
+            onMessageClick: onMessageClick,
+            isDesktopView: isDesktopView,
+            isSmallScreen: isSmallScreen,
+            showAuthorName: showAvatar,
+            showAvatar: showAvatar,
+            showTimestamp: showDate,
+            sandboxErrors: sandboxErrors,
+            currentFiles: currentFiles,
+            onFixError: onFixError,
+            showCopyDownloadOnCodeBlock: showCopyDownloadOnCodeBlock
+          })
+        }, post.id)), streamingContent?.trim() && jsx("div", {
+          className: "flex justify-start",
+          children: jsx("div", {
+            className: clsx('max-w-[85%] w-full rounded-2xl px-4 py-3 text-gray-900', ASSISTANT_BUBBLE_BG, showMessageBubbleBorder && `border ${BORDER_COLOR}`),
+            children: jsx("div", {
+              className: "min-w-0 text-[15px] leading-relaxed break-words whitespace-pre-wrap",
+              children: renderStreamingContent ? renderStreamingContent(streamingContent) : streamingContent
+            })
+          })
+        }), isLoading && jsx("div", {
+          className: "flex justify-start",
+          children: jsxs("div", {
+            className: "rounded-2xl px-4 py-3 bg-gray-100 border border-gray-200 flex items-center gap-2",
+            children: [jsx("div", {
+              className: "w-4 h-4 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin"
+            }), jsx("span", {
+              className: "text-sm text-gray-600",
+              children: "Thinking..."
+            })]
+          })
+        })]
+      })
+    }), shouldRenderBottomToolbar && jsx("div", {
+      className: "border-t border-gray-200 bg-white p-3",
+      children: renderToolbar(inputToolbarProps)
+    })]
+  });
+}export{PlanModeView,defaultPlanMessageToPost};//# sourceMappingURL=PlanModeView.js.map

package/lib/components/messages-container-ui/PlanModeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlanModeView.js","sources":["../../../src/components/messages-container-ui/PlanModeView.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}

package/lib/components/messages-container-ui/index.d.ts

@@ -0,0 +1,9 @@
+export { MessagesContainerUI } from './MessagesContainerUI';
+export type { MessagesContainerUIProps } from './MessagesContainerUI';
+export { PlanModeView, defaultPlanMessageToPost } from './PlanModeView';
+export type { PlanModeViewProps, PlanModeViewInputToolbarProps } from './PlanModeView';
+export { DefaultMessageGroup } from './DefaultMessageGroup';
+export { DefaultInputToolBar } from './DefaultInputToolBar';
+export type { DefaultInputToolBarProps } from './DefaultInputToolBar';
+export type { PlanMessage, CurrentUser, MessageGroupRenderProps, MessageGroupComponentType } from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/messages-container-ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/messages-container-ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AACxE,YAAY,EAAE,iBAAiB,EAAE,6BAA6B,EAAE,MAAM,gBAAgB,CAAC;AACvF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC"}

package/lib/components/messages-container-ui/types.d.ts

@@ -0,0 +1,63 @@
+import type React from 'react';
+/**
+ * Messages container UI – types for plan mode (chat / search / research).
+ * Messages can be a simple PlanMessage or a full post-like shape passed through
+ * to the injected message-group renderer.
+ */
+export interface PlanMessage {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    createdAt?: Date | string;
+    /** Optional: pass through to the injected message-group renderer (propsConfiguration, props, files, etc.) */
+    propsConfiguration?: any;
+    props?: any;
+    files?: any;
+    author?: any;
+    type?: string;
+}
+/** Props passed to the input toolbar render function. */
+export interface PlanModeViewInputToolbarProps {
+    value: string;
+    onChange: (text: string) => void;
+    onSend: () => void;
+    disabled?: boolean;
+}
+export interface CurrentUser {
+    id: string;
+    name?: string;
+    avatar?: string;
+    /** Optional: full author shape for the message-group renderer (givenName, familyName, username, etc.) */
+    givenName?: string;
+    familyName?: string;
+    fullName?: string;
+    username?: string;
+    email?: string;
+    picture?: string | null;
+    alias?: any[];
+    tokens?: any[];
+}
+/**
+ * Props the base passes to the injected message-group renderer (`MessageGroupComponent`).
+ * Mirrors the shape consumed by richer renderers (e.g. messenger-box's
+ * `ModernMessageGroupComponent`) so they can be dropped in directly.
+ */
+export interface MessageGroupRenderProps {
+    /** One post group to render (the base passes a single mapped post per group). */
+    messages: any[];
+    currentUser: any;
+    onOpen?: (element?: any) => void;
+    onMessageClick?: (msg: any) => void;
+    isDesktopView?: boolean;
+    isSmallScreen?: boolean;
+    showAuthorName?: boolean;
+    showAvatar?: boolean;
+    showTimestamp?: boolean;
+    sandboxErrors?: any[];
+    currentFiles?: Record<string, string>;
+    onFixError?: (errorMessage: string) => Promise<void>;
+    showCopyDownloadOnCodeBlock?: boolean;
+}
+/** The injectable message-group renderer. Defaults to a plain-text bubble renderer. */
+export type MessageGroupComponentType = React.ComponentType<MessageGroupRenderProps>;
+//# sourceMappingURL=types.d.ts.map

package/lib/components/messages-container-ui/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/messages-container-ui/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;GAIG;AAEH,MAAM,WAAW,WAAW;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,6GAA6G;IAC7G,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,yDAAyD;AACzD,MAAM,WAAW,6BAA6B;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yGAAyG;IACzG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IACd,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;CAClB;AAED;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACpC,iFAAiF;IACjF,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,WAAW,EAAE,GAAG,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACzC;AAED,uFAAuF;AACvF,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib/index.js

@@ -0,0 +1 @@
+export{MessagesContainerUI}from'./components/messages-container-ui/MessagesContainerUI.js';export{PlanModeView,defaultPlanMessageToPost}from'./components/messages-container-ui/PlanModeView.js';export{DefaultMessageGroup}from'./components/messages-container-ui/DefaultMessageGroup.js';export{DefaultInputToolBar}from'./components/messages-container-ui/DefaultInputToolBar.js';//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/routes.json

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

package/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "@admin-layout/tailwind-chat-pro",
+    "version": "12.2.4-alpha.76",
+    "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.72",
+        "clsx": "^2.1.1"
+    },
+    "devDependencies": {
+        "common": "12.2.4-alpha.72"
+    },
+    "peerDependencies": {
+        "@admin-layout/tailwind-ui": "12.2.4-alpha.72",
+        "common": "12.2.4-alpha.72",
+        "react": ">=16.14.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "fbcea85d7ba6ebd143bf9f82a6d6cc2baa21ffb2",
+    "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-white';
+const USER_BUBBLE_BG = 'bg-indigo-50';
+const BORDER_COLOR = 'border-gray-200';
+
+/**
+ * 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-gray-900',
+                            '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;