@messenger-box/tailwind-ui-inbox 10.0.3-alpha.184 → 10.0.3-alpha.185

package/src/components/ModelConfigPanel.tsx

@@ -22,6 +22,8 @@ export interface ModelToolbarProps {
     showProjectSettings?: boolean;
     isShowMeta?: boolean;
     showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
 }
 
 const providerIcons: Record<ModelConfig['provider'], string> = {
@@ -376,6 +378,8 @@ export interface ModelToolbarProps {
     showProjectSettings?: boolean;
     isShowMeta?: boolean;
     showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
 }
 
 type MetadataFieldKey = keyof NonNullable<PersistentModelConfig['metadata']>;
@@ -463,6 +467,8 @@ export const ModelToolbar: React.FC<ModelToolbarProps> = ({
     showProjectSettings = true,
     isShowMeta = false,
     showModeSelector = false,
+    showStopButton = false,
+    onStop,
 }) => {
     const [showModelDropdown, setShowModelDropdown] = useState(false);
     const [showToolbarModelDropdown, setShowToolbarModelDropdown] = useState(false);
@@ -830,44 +836,56 @@ export const ModelToolbar: React.FC<ModelToolbarProps> = ({
                     </div>
                 </UploadImageButton>
 
-                {/* Send Button */}
-                <button
-                    className={`flex items-center justify-center w-7 h-7 sm:w-7 sm:h-7 rounded-lg border transition-colors shrink-0 ${
-                        canSend && !sending
-                            ? 'border-blue-500 bg-blue-500 hover:bg-blue-600 text-white'
-                            : 'border-gray-300 bg-gray-100 text-gray-400 cursor-not-allowed'
-                    }`}
-                    onClick={onSend}
-                    disabled={!canSend || sending}
-                    type="button"
-                >
-                    {sending ? (
-                        <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
-                            <circle
-                                className="opacity-25"
-                                cx="12"
-                                cy="12"
-                                r="10"
-                                stroke="currentColor"
-                                strokeWidth="4"
-                            ></circle>
-                            <path
-                                className="opacity-75"
-                                fill="currentColor"
-                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                            ></path>
-                        </svg>
-                    ) : (
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-                            />
+                {/* Send/Stop Button */}
+                {showStopButton ? (
+                    <button
+                        className="flex items-center justify-center w-7 h-7 sm:w-7 sm:h-7 rounded-lg border border-red-500 bg-red-500 hover:bg-red-600 text-white transition-colors shrink-0"
+                        onClick={onStop}
+                        type="button"
+                    >
+                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+                            <circle cx="12" cy="12" r="8" fill="white" />
                         </svg>
-                    )}
-                </button>
+                    </button>
+                ) : (
+                    <button
+                        className={`flex items-center justify-center w-7 h-7 sm:w-7 sm:h-7 rounded-lg border transition-colors shrink-0 ${
+                            canSend && !sending
+                                ? 'border-blue-500 bg-blue-500 hover:bg-blue-600 text-white'
+                                : 'border-gray-300 bg-gray-100 text-gray-400 cursor-not-allowed'
+                        }`}
+                        onClick={onSend}
+                        disabled={!canSend || sending}
+                        type="button"
+                    >
+                        {sending ? (
+                            <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                                <circle
+                                    className="opacity-25"
+                                    cx="12"
+                                    cy="12"
+                                    r="10"
+                                    stroke="currentColor"
+                                    strokeWidth="4"
+                                ></circle>
+                                <path
+                                    className="opacity-75"
+                                    fill="currentColor"
+                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                ></path>
+                            </svg>
+                        ) : (
+                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                                />
+                            </svg>
+                        )}
+                    </button>
+                )}
             </div>
 
             {/* Settings Modal - Only API Key and Model + IDs */}

package/src/container/AiLandingInput.tsx

@@ -17,6 +17,8 @@ type AiLandingInputProps = {
     showModelToolbarProjectSettings?: boolean;
     isShowMeta?: boolean;
     showModeSelector?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
     [key: string]: any;
 };
 
@@ -24,6 +26,8 @@ const AiLandingInput: React.FC<AiLandingInputProps> = ({
     showModelToolbarProjectSettings = false,
     isShowMeta = false,
     showModeSelector = false,
+    showStopButton = false,
+    onStop = () => {},
     ...props
 }) => {
     const { orgName } = useParams();
@@ -160,6 +164,8 @@ const AiLandingInput: React.FC<AiLandingInputProps> = ({
                         showModelToolbarProjectSettings={showModelToolbarProjectSettings}
                         isShowMeta={isShowMeta}
                         showModeSelector={showModeSelector}
+                        showStopButton={showStopButton}
+                        onStop={onStop}
                         {...props}
                     />
                     {/* <div className="text-center text-sm text-gray-400">

package/src/container/InboxAiMessagesLoader.tsx

@@ -21,6 +21,8 @@ interface InboxWithAiLoaderOutletProps {
     selectedPost?: any;
     setSelectedPost?: (post: any) => void;
     sendMessageInput?: (message: string, files: File[]) => Promise<void>;
+    showStopButton?: boolean;
+    onStop?: () => void;
     [key: string]: any; // Allow other props to be passed through to Inbox
 }
 
@@ -36,6 +38,8 @@ const InboxWithAiLoaderOutlet = (props: InboxWithAiLoaderOutletProps) => {
         sendMessageInput,
         isShowOnlyInbox,
         showModeSelector,
+        showStopButton = false,
+        onStop = () => {},
     } = useOutletContext() as any;
     const urlParams = location?.search ? new URLSearchParams(location.search) : null;
     const { id: pathChannelId } = useParams();
@@ -58,6 +62,8 @@ const InboxWithAiLoaderOutlet = (props: InboxWithAiLoaderOutletProps) => {
             isShowOnlyInbox={isShowOnlyInbox}
             showModeSelector={showModeSelector}
             showDateSeparators={props?.showDateSeparators || false}
+            showStopButton={showStopButton}
+            onStop={onStop}
             {...props}
         />
     );

package/src/container/InboxContainer.tsx

@@ -13,6 +13,8 @@ interface InboxContainerProps {
     showModeSelector?: boolean;
     showContextTab?: boolean;
     ContextTabComponent?: React.ComponentType<{ context: any; selectedPost?: any }>;
+    showStopButton?: boolean;
+    onStop?: () => void;
     [key: string]: any;
 }
 

package/src/container/InboxWithAiLoader.tsx

@@ -46,6 +46,8 @@ interface InboxWithAiLoaderProps {
     showModeSelector?: boolean;
     showContextTab?: boolean;
     ContextTabComponent?: React.ComponentType<{ context: any; selectedPost?: any }>;
+    showStopButton?: boolean;
+    onStop?: () => void;
     [key: string]: any;
 }
 
@@ -60,6 +62,8 @@ const InboxWithAiLoader = (props: InboxWithAiLoaderProps) => {
         showContextTab = true,
         ContextTabComponent = null,
         inboxTitle = 'Chat',
+        showStopButton = false,
+        onStop = () => {},
     } = props;
     const { orgName, channelRole: channelRoleParam } = useParams();
     const location = useLocation();
@@ -76,6 +80,8 @@ const InboxWithAiLoader = (props: InboxWithAiLoaderProps) => {
             showContextTab: showContextTab,
             ContextTabComponent: ContextTabComponent,
             inboxTitle: inboxTitle || 'Chat',
+            showStopButton: showStopButton,
+            onStop: onStop,
         }),
         [props, orgName, pathPrefix],
     );
@@ -96,6 +102,8 @@ const InboxWithAiLoader = (props: InboxWithAiLoaderProps) => {
                 showModelToolbarProjectSettings={showModelToolbarProjectSettings}
                 isShowMeta={isShowMeta}
                 showModeSelector={showModeSelector}
+                showStopButton={showStopButton}
+                onStop={onStop}
             />
         );
     }

package/src/container/TestInboxWithAiLoader.tsx

@@ -80,6 +80,10 @@ const TestInboxWithAiLoaderOutlet = () => {
             showContextTab={false}
             showModeSelector={true}
             inboxTitle="Chat"
+            showStopButton={true}
+            onStop={() => {
+                console.log('🛑 onStop called');
+            }}
         />
     );
 };

package/src/templates/InboxWithAi.tsx

@@ -35,6 +35,8 @@ export interface InboxProps {
     inboxTitle?: string;
     showModeSelector?: boolean;
     showContextTab?: boolean;
+    showStopButton?: boolean;
+    onStop?: () => void;
     ContextTabComponent?: React.ComponentType<{ context: any; selectedPost?: any }>;
 }
 
@@ -169,16 +171,29 @@ const InboxWithAiInternal = (props: InboxProps) => {
                 setIsCreatingSandbox(true);
                 setError(null);
 
-                props.handleRecreateSandbox?.(messageId);
+                props?.handleRecreateSandbox?.(messageId);
             } catch (err) {
                 console.error('Error recreating sandbox:', err);
                 setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
                 setIsCreatingSandbox(false);
             }
         },
-        [channelId],
+        [channelId, props?.handleRecreateSandbox],
     );
 
+    const handleStop = useCallback(async () => {
+        try {
+            setIsCreatingSandbox(true);
+            setError(null);
+
+            props?.onStop?.();
+        } catch (err) {
+            console.error('Error stopping:', err);
+            setError(err instanceof Error ? err.message : 'Failed to recreate sandbox');
+            setIsCreatingSandbox(false);
+        }
+    }, [props?.onStop]);
+
     // Handle refresh sandbox
     const handleRefreshSandbox = useCallback(() => {
         if (selectedPost) {
@@ -424,6 +439,8 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                 sendMessageInput={sendMessageInput}
                                 isShowOnlyInbox={isShowOnlyInbox}
                                 showModeSelector={props?.showModeSelector}
+                                showStopButton={props?.showStopButton}
+                                onStop={handleStop}
                             />
                         ) : (
                             <EmptyState />
@@ -459,6 +476,8 @@ const InboxWithAiInternal = (props: InboxProps) => {
                                 handleRecreateSandbox={props?.handleRecreateSandbox || null}
                                 isMinimized={isMinimized}
                                 ContextTabComponent={props?.ContextTabComponent ?? DefaultContextTab}
+                                showStopButton={props?.showStopButton}
+                                onStop={handleStop}
                                 {...props}
                             />
                         </div>
@@ -481,6 +500,8 @@ const ContentComponent = React.memo((props: any) => {
         sendMessageInput,
         isShowOnlyInbox,
         showModeSelector,
+        showStopButton,
+        onStop,
     } = props;
 
     return (
@@ -503,6 +524,8 @@ const ContentComponent = React.memo((props: any) => {
                                 sendMessageInput={sendMessageInput}
                                 isShowOnlyInbox={isShowOnlyInbox}
                                 showModeSelector={showModeSelector}
+                                showStopButton={showStopButton}
+                                onStop={onStop}
                             />
                         </>
                     )}