@messenger-box/tailwind-ui-inbox 10.0.3-alpha.0

package/src/components/AIAgent/README.md

@@ -0,0 +1,174 @@
+# InputComponent (AIAgent)
+
+A full **message input** component for the AI inbox: textarea, file attachments, plan/build mode toggles, optional template pill, project settings modal, and send/mic button. It composes `InputToolBar` from `@admin-layout/tailwind-ui` and wires model config, templates, and overrides.
+
+## Features
+
+-   **Message input**: Controlled textarea with placeholder, paste handling, and Enter-to-send.
+-   **Attachments**: Add/remove files; image previews; configurable max files per message.
+-   **Plan / Build mode**: Left toolbar toggles (plan = chat, build = template mode). Mode is synced with `modelConfig.mode` via `onModelConfigChange`.
+-   **Template pill**: In build mode, optional “+ Template” pill opens a template selection modal. Visibility is controlled by `leftItemsOverrides.template.enabled` (default: hidden unless `enabled: true`).
+-   **Project settings**: Optional gear button opens the same project settings modal (Configuration, Other Settings, Secret). Enabled via `rightItemsOverrides.projectSettings.enabled === true`.
+-   **Toolbar customization**: Use `leftItemsOverrides` / `rightItemsOverrides` for per-item overrides, or `inputToolBarProps` for full overrides (left/right items, classNames, callbacks, modals).
+
+## Installation
+
+The component lives in `@messenger-box/tailwind-ui-inbox`:
+
+```ts
+import { InputComponent } from '@messenger-box/tailwind-ui-inbox';
+// Types
+import type {
+    MessageInputProps,
+    LeftItemsOverrides,
+    RightItemsOverrides,
+    InputToolBarPropsOverrides,
+    LeftToolbarItemId,
+    RightToolbarItemId,
+} from '@messenger-box/tailwind-ui-inbox';
+```
+
+## Props (`MessageInputProps`)
+
+| Prop                      | Type                                                | Description                                                                                              |
+| ------------------------- | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `handleSend`              | `(message: string, files: File[]) => Promise<void>` | Called on submit with message text and attached files.                                                   |
+| `placeholder`             | `string`                                            | Placeholder for the textarea.                                                                            |
+| `modelConfig`             | `ModelConfig`                                       | Current model config (provider, model, apiKey, template, mode, etc.). From `usePersistentModelConfig()`. |
+| `onModelConfigChange`     | `(config: ModelConfig) => void`                     | Called when mode or config changes (e.g. plan/build switch, settings modal).                             |
+| `textareaClassName`       | `string`                                            | Optional class for the textarea.                                                                         |
+| `textareaStyles`          | `React.CSSProperties`                               | Optional inline styles for the textarea.                                                                 |
+| `toolBarParentClassName`  | `string`                                            | Optional class for the wrapper around the toolbar.                                                       |
+| `inputToolBarParentClass` | `string`                                            | Optional class merged onto the InputToolBar container.                                                   |
+| `isShowMeta`              | `boolean`                                           | Passed to the project settings modal (e.g. show extra metadata).                                         |
+| `showModeSelector`        | `boolean`                                           | Whether the plan/build left toggles are relevant (no direct visual change; can be used by parent).       |
+| `showStopButton`          | `boolean`                                           | When true, mic/send button can show Stop and call `onStop`.                                              |
+| `onStop`                  | `() => void`                                        | Called when user clicks Stop (e.g. stop AI generation).                                                  |
+| `templates`               | `TemplateConfig[]`                                  | List of templates for the template modal (build mode).                                                   |
+| `selectedTemplate`        | `TemplateConfig \| null`                            | Currently selected template.                                                                             |
+| `suggestedTemplate`       | `TemplateConfig \| null`                            | Optional suggested template in the modal.                                                                |
+| `onSelectTemplate`        | `(template: TemplateConfig \| null) => void`        | Called when user selects or clears a template.                                                           |
+| `leftItemsOverrides`      | `LeftItemsOverrides`                                | Per-item overrides for left toolbar (search, zap, lightbulb, template).                                  |
+| `rightItemsOverrides`     | `RightItemsOverrides`                               | Per-item overrides for right toolbar (projectSettings, tag, chip, camera, image, attach, mic).           |
+| `inputToolBarProps`       | `InputToolBarPropsOverrides`                        | Full overrides for InputToolBar (className, classNames, leftItems, rightItems, callbacks, modals, etc.). |
+
+## Left / right item overrides
+
+Use these to show/hide or customize toolbar items **without** replacing the whole list.
+
+### Left item ids (`LeftToolbarItemId`)
+
+`'search' | 'zap' | 'lightbulb' | 'template'`
+
+-   **search** – Plan mode (chat).
+-   **zap** – Disabled by default.
+-   **lightbulb** – Build mode (templates).
+-   **template** – When `enabled: true`, the template pill is shown in build mode; when `enabled: false` or omitted, the pill is hidden.
+
+### Right item ids (`RightToolbarItemId`)
+
+`'projectSettings' | 'tag' | 'chip' | 'camera' | 'image' | 'attach' | 'mic'`
+
+-   **projectSettings** – Gear icon. Shown only when `rightItemsOverrides.projectSettings.enabled === true`. Opens the project settings modal.
+-   **tag**, **chip**, **camera**, **image** – Disabled by default; enable or override as needed.
+-   **attach** – Wired to a hidden file input; override `onClick` if you need custom behavior.
+-   **mic** – Replaced by the combined mic/send button when the component provides `micSendButton`.
+
+### Override shape
+
+```ts
+// Left: e.g. hide template pill, or enable and keep default behavior
+leftItemsOverrides={{ template: { enabled: false } }}
+leftItemsOverrides={{ template: { enabled: true } }}
+
+// Right: enable project settings button
+rightItemsOverrides={{ projectSettings: { enabled: true } }}
+```
+
+Each item can receive `enabled`, `label`, `active`, `onClick`, `icon`, `customButton` (see `LeftItemOverride` / `RightItemOverride` in the source).
+
+## InputToolBar overrides (`inputToolBarProps`)
+
+When you need to **replace** or fully control toolbar content or behavior, pass `inputToolBarProps`. Any prop you set overrides the component’s internal value for that prop.
+
+### Type
+
+`InputToolBarPropsOverrides` = `Partial<Omit<InputToolBarProps, 'inputConfig' | 'children'>> & { templateModalClassName?: string }`
+
+So you can pass any InputToolBar prop except `inputConfig` and `children`, plus:
+
+-   **templateModalClassName** – Class for the template modal content box (e.g. `max-w-xl`). Used when the component builds the default template modal.
+
+### Overridable props (summary)
+
+| Category             | Props                                                                                   |
+| -------------------- | --------------------------------------------------------------------------------------- |
+| **Styling**          | `className`, `classNames`, `templateModalClassName`                                     |
+| **Content**          | `topContent`, `leftItems`, `rightItems`, `leftCustomRender`, `rightCustomRender`        |
+| **Template**         | `templateButton`, `templateModalConfig`, `templateModalRender`                          |
+| **Project settings** | `projectSettingsModalOpen`, `onProjectSettingsModalClose`, `projectSettingsModalRender` |
+| **Actions**          | `micSendButton`, `onContainerClick`                                                     |
+
+### Example: standardize from the loader
+
+```tsx
+// e.g. in TestInboxWithAiLoader or InboxWithAiLoader
+<InboxWithAiLoader
+    inputToolBarProps={{
+        templateModalClassName: 'max-w-xl',
+        classNames: {
+            container: 'rounded-[24px]',
+        },
+    }}
+    leftItemsOverrides={{ template: { enabled: false } }}
+    rightItemsOverrides={{ projectSettings: { enabled: true } }}
+/>
+```
+
+### Example: custom left/right items and callback
+
+```tsx
+<InputComponent
+    handleSend={handleSend}
+    modelConfig={modelConfig}
+    onModelConfigChange={updateModelConfig}
+    inputToolBarProps={{
+        leftItems: myCustomLeftItems,
+        rightItems: myCustomRightItems,
+        onContainerClick: (e) => {
+            myFocusLogic();
+            textareaRef.current?.focus();
+        },
+    }}
+/>
+```
+
+## Internal behavior (no override)
+
+-   **inputConfig** and **children** are never overridable; the component always owns the textarea and optional attachment preview as `topContent`.
+-   **Default left items**: Plan (search) and Build (lightbulb) toggles, with zap disabled. Merged with `leftItemsOverrides` and passed to `getDefaultLeftItems`.
+-   **Default right items**: Attach wired to file input; projectSettings only if `rightItemsOverrides.projectSettings.enabled === true`. Merged with `rightItemsOverrides` and passed to `getDefaultRightItems`.
+-   **Template pill**: Rendered only in build mode and when `leftItemsOverrides.template.enabled === true`.
+-   **Project settings modal**: Uses `ProjectSettingsModal` from `ModelConfigPanel`; open state is internal, unless overridden via `inputToolBarProps.projectSettingsModalOpen` / `onProjectSettingsModalClose` / `projectSettingsModalRender`.
+
+## Exported types
+
+From `@messenger-box/tailwind-ui-inbox`:
+
+-   `MessageInputProps` – Props for `InputComponent`.
+-   `LeftItemOverride`, `RightItemOverride` – Per-item override shape.
+-   `LeftToolbarItemId`, `RightToolbarItemId` – Item id unions.
+-   `LeftItemsOverrides`, `RightItemsOverrides` – Maps of overrides by id.
+-   `InputToolBarPropsOverrides` – Full InputToolBar overrides (excluding `inputConfig` and `children`).
+
+## Dependencies
+
+-   **@admin-layout/tailwind-ui**: `InputToolBar`, `getDefaultLeftItems`, `getDefaultRightItems`, and `InputToolBarProps`.
+-   **usePersistentModelConfig**: Not used inside InputComponent; parent passes `modelConfig` and `onModelConfigChange`.
+-   **ProjectSettingsModal**: From `../ModelConfigPanel`; used when project settings is enabled.
+
+## See also
+
+-   **InputToolBar** in `@admin-layout/tailwind-ui`: that package’s InputToolBar README documents toolbar props (`leftItems`, `rightItems`, `classNames`, `templateModalConfig`, etc.).
+-   **usePersistentModelConfig**: shared model config state; parent typically passes `modelConfig` and `updateModelConfig` into this component.
+-   **InboxWithAiLoader**, **TestInboxWithAiLoader**: examples of passing `inputToolBarProps`, `leftItemsOverrides`, and `rightItemsOverrides` from the route/loader level.

package/src/components/AIAgent/index.ts

@@ -0,0 +1 @@
+export { AIAgent } from './AIAgent';

package/src/components/InboxMessage/CommonMessage.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { format } from 'date-fns';
+import { BsFlag } from '@react-icons/all-files/bs/BsFlag.js';
+import { FilesList } from '../inbox';
+
+export const CommonMessage = ({ message, index, onOpen, currentUser }) => {
+    return (
+        <div className="w-full flex justify-start mb-7" key={`msgList_${index}`}>
+            <div className="flex flex-grow">
+                <img
+                    className="w-8 h-8 bg-gray-500 rounded-full mr-4 cursor-pointer"
+                    src={message?.imageUrl || ''}
+                    alt="User avatar"
+                    onClick={onOpen}
+                />
+                <div className="flex-grow">
+                    <div className="flex flex-grow mt-1">
+                        <span className="text-sm text-gray-600 font-bold">
+                            {message?.author?.familyName && message?.author?.givenName
+                                ? message?.author?.givenName + ' ' + message?.author?.familyName
+                                : message?.author?.username}
+                        </span>
+                        <span className="text-sm text-gray-500 ml-2">
+                            {format(new Date(message?.createdAt), 'MMM dd, yyyy hh:mm aaa')}
+                        </span>
+                    </div>
+                    <div>
+                        <p className="text-sm mt-1 mb-1 whitespace-pre-line">{message?.message}</p>
+                        {message.files?.totalCount ? <FilesList uploaded files={message.files?.data} /> : null}
+                    </div>
+                </div>
+            </div>
+            {currentUser?.id !== message?.author?.id && (
+                <div className="ml-2">
+                    <BsFlag className="text-gray-600 w-6 h-6" />
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/InboxMessage/ConversationItem.tsx

@@ -0,0 +1,255 @@
+import { useMessagesQuery, OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED } from 'common/graphql';
+import { format, isToday, isYesterday } from 'date-fns';
+import React, { useMemo, useEffect, useState, useCallback } from 'react';
+import { SubscriptionHandler } from './SubscriptionHandler';
+
+const createdAtText = (value) => {
+    if (!value) return '';
+    let date = new Date(value);
+    if (isToday(date)) return 'Today';
+    if (isYesterday(date)) return 'Yesterday';
+    return format(new Date(value), 'MMM dd, yyyy');
+};
+
+// Custom Skeleton component for loading state
+const Skeleton = ({ className = '' }) => {
+    return (
+        <div className={`animate-pulse bg-gray-300 dark:bg-gray-600 rounded ${className}`}>
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
+            <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/2"></div>
+        </div>
+    );
+};
+
+interface ConversationItemProps {
+    showBorder: boolean;
+    currentUser: any;
+    filter: string;
+    channel: any;
+    handleSelectChannel: (channelId: string) => void;
+    users: any[];
+    selectedChannelId: string;
+    messagesQuery: any;
+}
+
+export const ConversationItem = React.memo(
+    ({
+        showBorder,
+        currentUser,
+        filter,
+        channel,
+        handleSelectChannel,
+        users,
+        selectedChannelId,
+        messagesQuery: messagesQueryProp,
+    }: ConversationItemProps) => {
+        // const {
+        //     data: messagesQuery,
+        //     loading: messageLoading,
+        // } = useMessagesQuery({
+        //     variables: {
+        //         channelId: channel.id?.toString(),
+        //         limit: 1,
+        // },
+        //     fetchPolicy: 'cache-and-network',
+        // });
+        const [messages, setMessages] = useState([]);
+        const {
+            data: messagesQuery,
+            loading: messageLoading,
+            refetch: refetchMessages,
+            subscribeToMore,
+        } = useMessagesQuery({
+            variables: {
+                channelId: channel?.id?.toString(),
+                parentId: null,
+                limit: 10,
+                // sort: {
+                //     key: 'updatedAt',
+                //     value: SortEnum.Desc,
+                // },
+            },
+            fetchPolicy: 'cache-and-network',
+            refetchWritePolicy: 'merge',
+        });
+
+        // const {
+        //     data: newMessage,
+        //     loading: newMsgLoading,
+        //     error: newMsgError,
+        // }: any = useOnChatMessageAddedSubscription({
+        //     variables: {
+        //         channelId: channel?.id?.toString(),
+        //     },
+        // });
+
+        React.useEffect(() => {
+            if (channel?.id) {
+                refetchMessages({
+                    channelId: channel?.id?.toString(),
+                    parentId: null,
+                    limit: 10,
+                    // sort: {
+                    //     key: 'updatedAt',
+                    //     value: SortEnum.Desc,
+                    // },
+                });
+            }
+        }, [channel?.id, refetchMessages]);
+
+        React.useEffect(() => {
+            if (messagesQuery?.messages?.data?.length) {
+                setMessages(messagesQuery.messages.data);
+            }
+        }, [messagesQuery?.messages?.data]);
+
+        const chatUser = useMemo(
+            () =>
+                users?.find(({ id }) => {
+                    const isNotCurrentUser = id !== currentUser?.id;
+                    if (isNotCurrentUser) {
+                        return channel?.members?.find(({ user }) => user.id === id);
+                    }
+                    if (channel?.members?.length === 1 && channel?.members?.[0]?.user?.id === currentUser?.id) {
+                        return currentUser;
+                    }
+                    return isNotCurrentUser;
+                }),
+            [users, currentUser, channel],
+        );
+
+        // Last Message
+        // const lastMessage = useMemo(() => {
+        //     if (!messagesQuery?.messages?.data?.length) {
+        //         return null;
+        //     }
+        //     const { data } = messagesQuery.messages;
+        //     return data[data.length - 1];
+        // }, [messagesQuery]);
+        const lastMessage = useMemo(() => {
+            if (!messages?.length) {
+                return null;
+            }
+            const data = messages;
+            const filteredData: any = data?.filter((p: any) => p?.message !== '');
+
+            //return filteredData[0];
+            let filteredLastMessage =
+                filteredData && filteredData?.length
+                    ? filteredData?.reduce((a, b) => {
+                          return new Date(a?.updatedAt) > new Date(b?.updatedAt) ? a : b;
+                      }, []) ?? null
+                    : null;
+            return filteredLastMessage;
+            // //return data[data.length - 1];
+        }, [messages]);
+
+        const channelType = useMemo(() => {
+            return channel?.type;
+        }, [channel]);
+
+        if (
+            filter &&
+            !chatUser?.username?.toLowerCase().includes(filter.toLowerCase()) &&
+            !lastMessage?.message?.toLowerCase().includes(filter.toLowerCase())
+        ) {
+            return null;
+        }
+
+        return (
+            <div
+                key={`conv_channel_${channel.id}`}
+                className={`cursor-pointer flex items-center p-3 border-b ${
+                    showBorder ? 'border-gray-300' : 'border-transparent'
+                } ${
+                    channel.id == selectedChannelId
+                        ? 'bg-gray-300 dark:bg-gray-500'
+                        : 'hover:bg-gray-50 dark:hover:bg-gray-700'
+                }`}
+                onClick={() => channel.id !== selectedChannelId && handleSelectChannel(channel.id)}
+            >
+                <img
+                    className="w-10 h-10 rounded-full bg-gray-400 object-cover flex-shrink-0"
+                    src={chatUser?.picture || '/default-avatar.svg'}
+                    alt={chatUser?.givenName || 'User avatar'}
+                    onError={(e) => {
+                        // Prevent infinite loop by checking if we're already showing the fallback
+                        if (e.currentTarget.src.includes('default-avatar.svg')) {
+                            // If SVG also fails, use a data URL fallback
+                            e.currentTarget.src =
+                                'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIgZmlsbD0iI0U1RTdFQiIvPgogIDxjaXJjbGUgY3g9IjIwIiBjeT0iMTYiIHI9IjYiIGZpbGw9IiM5Q0EzQUYiLz4KICA8cGF0aCBkPSJNOCAzMmMwLTYuNjI3IDUuMzczLTEyIDEyLTEyczEyIDUuMzczIDEyIDEyIiBmaWxsPSIjOUNBM0FGIi8+Cjwvc3ZnPgo=';
+                        } else {
+                            e.currentTarget.src = '/default-avatar.svg';
+                        }
+                    }}
+                />
+                <div className="ml-2 flex-grow min-w-10 max-w-96">
+                    {messageLoading && <Skeleton className="w-full h-16" />}
+                    {!messageLoading && (
+                        <>
+                            <LastMessageComponent
+                                lastMessage={lastMessage}
+                                channelType={channelType}
+                                chatUser={chatUser}
+                            />
+                            <SubscriptionHandler
+                                subscribeToMore={subscribeToMore}
+                                document={CHAT_MESSAGE_ADDED}
+                                variables={{ channelId: channel?.id?.toString() }}
+                                enabled={!!channel?.id && !!subscribeToMore}
+                                updateQuery={(prev, { subscriptionData }: any) => {
+                                    if (!subscriptionData.data) return prev;
+                                    const newMessage: any = subscriptionData?.data?.chatMessageAdded;
+                                    console.log('ConversationItem: New message received via subscription:', newMessage);
+                                    const previousData = prev?.messages?.data
+                                        ? [...prev.messages.data, newMessage]
+                                        : [];
+                                    const totalMsgCount = prev?.messages?.totalCount + 1;
+                                    const merged = {
+                                        ...prev,
+                                        messages: {
+                                            ...prev?.messages,
+                                            data: previousData,
+                                            totalCount: totalMsgCount,
+                                        },
+                                    };
+                                    return merged;
+                                }}
+                                onError={(error) => {
+                                    console.error('ConversationItem: Subscription error:', error);
+                                }}
+                            />
+                        </>
+                    )}
+                </div>
+            </div>
+        );
+    },
+);
+
+interface LastMessageComponentProps {
+    lastMessage: any;
+    channelType: string;
+    chatUser: any;
+}
+
+const LastMessageComponent = React.memo(({ lastMessage, channelType, chatUser }: LastMessageComponentProps) => {
+    return (
+        <div className="flex flex-col w-full">
+            <div className="w-full flex justify-between items-center">
+                <span className="text-xs text-green-500 truncate">{channelType}</span>
+                <span className="text-xs text-gray-500">
+                    {lastMessage ? createdAtText(lastMessage?.createdAt) : ''}
+                </span>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-300 font-bold mt-1">
+                {chatUser?.givenName + ' ' + chatUser?.familyName}
+            </p>
+            <p className="text-sm text-gray-600 dark:text-gray-400 truncate w-4/5 mt-1 line-clamp-1">
+                {lastMessage?.message && lastMessage.message.length > 30
+                    ? lastMessage.message.slice(0, 30) + '…'
+                    : lastMessage?.message}
+            </p>
+        </div>
+    );
+});

package/src/components/InboxMessage/InputComponent.tsx

@@ -0,0 +1,198 @@
+import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { config } from '../../config';
+import { FilesList } from '../inbox';
+import { ModelToolbar } from '../ModelConfigPanel';
+import { ModelConfig } from '../../hooks/usePersistentModelConfig';
+
+type MessageInputProps = {
+    channelId?: string;
+    handleSend?: (message: string, files: File[]) => Promise<void>;
+    placeholder?: string;
+    modelConfig?: ModelConfig;
+    onModelConfigChange?: (config: ModelConfig) => void;
+    textareaClassName?: string;
+    textareaStyles?: React.CSSProperties;
+    toolBarParentClassName?: string;
+    showModelToolbarProjectSettings?: boolean;
+    isShowMeta?: boolean;
+    showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
+};
+
+export const InputComponent = ({
+    handleSend: handleSendProp,
+    placeholder,
+    modelConfig,
+    onModelConfigChange,
+    textareaClassName,
+    toolBarParentClassName,
+    textareaStyles,
+    showModelToolbarProjectSettings = false,
+    isShowMeta = false,
+    showModeSelector = false,
+    showStopButton = false,
+    onStop,
+}: MessageInputProps) => {
+    const [message, setMessage] = useState('');
+    const [sending, setSending] = useState(false);
+    const [files, setFiles] = useState<File[]>([]);
+    const [showToast, setShowToast] = useState(false);
+    const [toastMessage, setToastMessage] = useState('');
+    const [isFocused, setIsFocused] = useState(false);
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const { t } = useTranslation('translations');
+
+    // Auto-focus the textarea when component mounts
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    }, []);
+
+    // Ensure default template is set to 'vite-react' if missing
+    useEffect(() => {
+        if (modelConfig && !modelConfig.template && onModelConfigChange) {
+            onModelConfigChange({ ...modelConfig, template: 'vite-react' as any });
+        }
+    }, [modelConfig, onModelConfigChange]);
+
+    // no dropdowns managed here; toolbar handles its own
+
+    const showToastMessage = useCallback((message: string) => {
+        setToastMessage(message);
+        setShowToast(true);
+        setTimeout(() => setShowToast(false), 3000);
+    }, []);
+
+    const handleSend = useCallback(() => {
+        if (!message.trim() && files.length === 0) return;
+
+        setSending(true);
+        handleSendProp(message, files)
+            .then(() => {
+                setMessage('');
+                setFiles([]);
+                // Auto-focus the textarea after sending a message
+                setTimeout(() => {
+                    if (textareaRef.current) {
+                        textareaRef.current.focus();
+                    }
+                }, 100);
+            })
+            .finally(() => setSending(false));
+    }, [files, handleSendProp, message]);
+
+    const handleKeyDown = useCallback(
+        (e) => {
+            const keyCode = e.which || e.keyCode;
+            if (keyCode == 13 && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+            }
+        },
+        [handleSend],
+    );
+
+    const inputHeight = useMemo(() => {
+        const lines = message.split('\n').length;
+        return Math.max(120, Math.min(200, 120 + (lines - 1) * 20));
+    }, [message]);
+
+    const onUploadImageChange = useCallback(
+        ({ target }) => {
+            let fileList = [];
+            let index = 0;
+            if (files.length + target.files.length > config.FILES_PER_MESSAGE) {
+                showToastMessage(
+                    t('tailwind_ui_inbox.you_can_not_upload_more_than_files', {
+                        files_per_message: config.FILES_PER_MESSAGE,
+                    }),
+                );
+                return;
+            }
+            while (target.files[index]) {
+                fileList.push(target.files[index]);
+                index += 1;
+            }
+            setFiles((oldFiles) => [...oldFiles, ...fileList]);
+        },
+        [setFiles, files, showToastMessage, t],
+    );
+
+    const canSend = message.trim() || files.length > 0;
+    const hasContent = message.trim().length > 0;
+
+    // toolbar now owns model/template selections
+
+    return (
+        // <div className="bg-gray-50 border-t border-gray-200">
+        <div className="bg-white  ">
+            {/* Toast notification */}
+            {showToast && (
+                <div className="fixed top-4 right-4 z-50 bg-orange-50 border border-orange-200 text-orange-800 px-4 py-3 rounded-lg shadow-lg animate-bounce">
+                    <div className="flex items-center">
+                        <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                            <path
+                                fillRule="evenodd"
+                                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                                clipRule="evenodd"
+                            />
+                        </svg>
+                        {toastMessage}
+                    </div>
+                </div>
+            )}
+
+            {/* Files list */}
+            {files?.length > 0 && !sending && (
+                <div className="px-4 py-3 border-b border-gray-200">
+                    <FilesList files={files} />
+                </div>
+            )}
+
+            {/* Input container with textarea first, toolbar at bottom */}
+            <div className="px-4 py-3">
+                {/* Input field */}
+                <div className="relative mb-3">
+                    <textarea
+                        ref={textareaRef}
+                        className={`w-full text-base bg-white border border-gray-300 rounded-2xl pl-4 pr-4 py-3 resize-none focus:border-gray-300 focus:outline-none placeholder-gray-500 transition-all duration-200 ${
+                            isFocused ? 'border-gray-400 ring-2 ring-gray-300 focus:ring-gray-300' : 'border-gray-300'
+                        } ${textareaClassName}`}
+                        style={{
+                            height: `${inputHeight}px`,
+                            minHeight: '120px',
+                            maxHeight: '200px',
+                            ...textareaStyles,
+                        }}
+                        placeholder={placeholder || 'Message'}
+                        value={sending ? '' : message}
+                        onKeyDown={handleKeyDown}
+                        onChange={(e) => setMessage(e.target.value)}
+                        onFocus={() => setIsFocused(true)}
+                        onBlur={() => setIsFocused(false)}
+                        disabled={sending}
+                        rows={1}
+                    />
+                </div>
+                <div className={`${toolBarParentClassName}`}>
+                    <ModelToolbar
+                        modelConfig={modelConfig}
+                        onModelConfigChange={onModelConfigChange}
+                        sending={sending}
+                        canSend={!!canSend}
+                        onSend={handleSend}
+                        onUploadImageChange={onUploadImageChange}
+                        showProjectSettings={showModelToolbarProjectSettings}
+                        isShowMeta={isShowMeta}
+                        showModeSelector={showModeSelector}
+                        showStopButton={showStopButton}
+                        onStop={onStop}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};