refactor(DATAGO-126701): Enhance error handling and messaging in PromptBuilderChat components

client/webui/frontend/src/AppLayout.tsx

@@ -2,12 +2,11 @@ import { useEffect, useState, useCallback } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 
 import { NavigationSidebar, CollapsibleNavigationSidebar, ToastContainer, bottomNavigationItems, getTopNavigationItems, EmptyState } from "@/lib/components";
-import { MessageBanner } from "@/lib/components/common/MessageBanner";
 import { SelectionContextMenu, useTextSelection } from "@/lib/components/chat/selection";
 import { MoveSessionDialog } from "@/lib/components/chat/MoveSessionDialog";
 import { ModelSetupDialog } from "@/lib/components/models/ModelSetupDialog";
+import { ModelWarningBanner } from "@/lib/components/models/ModelWarningBanner";
 import { SettingsDialog } from "@/lib/components/settings/SettingsDialog";
-import { Button } from "@/lib/components/ui";
 import { ChatProvider } from "@/lib/providers";
 import { useBooleanFlagDetails } from "@openfeature/react-sdk";
 import { useAuthContext, useBeforeUnload, useConfigContext, useChatContext, useNavigationItems, useLocalStorage } from "@/lib/hooks";
@@ -177,25 +176,7 @@ function AppLayoutContent() {
                 <NavigationSidebar items={topNavItems} bottomItems={bottomNavigationItems} activeItem={getActiveItem()} onItemChange={handleNavItemChange} onHeaderClick={handleHeaderClick} />
             )}
             <main className="h-full w-full flex-1 overflow-auto">
-                {showModelWarning && (
-                    <MessageBanner
-                        variant="warning"
-                        style={{ alignItems: "center" }}
-                        message={
-                            <div className="flex w-full items-center justify-between gap-3">
-                                <span>
-                                    No model has been set up. Some features may not work as intended without a configured model.
-                                    {!hasModelConfigWrite && " Contact your administrator for assistance."}
-                                </span>
-                                {hasModelConfigWrite && (
-                                    <Button variant="outline" size="sm" className="shrink-0" onClick={() => navigate("/agents?tab=models")}>
-                                        Go to Models
-                                    </Button>
-                                )}
-                            </div>
-                        }
-                    />
-                )}
+                <ModelWarningBanner showWarning={!!showModelWarning} hasModelConfigWrite={hasModelConfigWrite} />
                 <Outlet />
             </main>
             <ToastContainer />

client/webui/frontend/src/lib/components/models/ModelWarningBanner.tsx

@@ -0,0 +1,35 @@
+import { useNavigate } from "react-router-dom";
+
+import { MessageBanner } from "@/lib/components/common/MessageBanner";
+import { Button } from "@/lib/components/ui";
+
+interface ModelWarningBannerProps {
+    showWarning: boolean;
+    hasModelConfigWrite: boolean;
+}
+
+export function ModelWarningBanner({ showWarning, hasModelConfigWrite }: ModelWarningBannerProps) {
+    const navigate = useNavigate();
+
+    if (!showWarning) return null;
+
+    return (
+        <MessageBanner
+            variant="warning"
+            style={{ alignItems: "center" }}
+            message={
+                <div className="flex w-full items-center justify-between gap-3">
+                    <span>
+                        No model has been set up. Some features may not work as intended without a configured model.
+                        {hasModelConfigWrite ? " Go to Agent Mesh to configure your models." : " Ask your administrator to configure models in Agent Mesh."}
+                    </span>
+                    {hasModelConfigWrite && (
+                        <Button variant="outline" size="sm" className="shrink-0" onClick={() => navigate("/agents?tab=models")}>
+                            Go to Models
+                        </Button>
+                    )}
+                </div>
+            }
+        />
+    );
+}

client/webui/frontend/src/lib/components/models/index.ts

@@ -3,5 +3,6 @@ export { ModelDetailsPage } from "./ModelDetailsPage";
 export { ModelDeleteDialog } from "./ModelDeleteDialog";
 export { ModelEditPage } from "./ModelEditPage";
 export { ModelSetupDialog } from "./ModelSetupDialog";
+export { ModelWarningBanner } from "./ModelWarningBanner";
 export { ModelProviderIcon } from "./ModelProviderIcon";
 export { PROVIDER_DISPLAY_NAMES, DEFAULT_MODEL_ALIASES } from "./common";

client/webui/frontend/src/lib/components/prompts/PromptBuilderChat.tsx

@@ -1,22 +1,25 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
-import { Send, Loader2, Sparkles } from "lucide-react";
+import { AlertCircle, Send, Loader2, Sparkles } from "lucide-react";
 
 import { AudioRecorder, Button, MessageBanner, Textarea } from "@/lib/components";
 import { useAudioSettings, useConfigContext } from "@/lib/hooks";
+import { cn } from "@/lib/utils";
 import type { TemplateConfig } from "@/lib/types";
 import { api } from "@/lib/api";
 
 interface Message {
     role: "user" | "assistant";
     content: string;
     timestamp: Date;
+    isError?: boolean;
 }
 
 interface ChatResponse {
     message: string;
     template_updates: Record<string, unknown>;
     confidence: number;
     ready_to_save: boolean;
+    is_error?: boolean;
 }
 
 interface PromptBuilderChatProps {
@@ -110,14 +113,15 @@ export const PromptBuilderChat: React.FC<PromptBuilderChatProps> = ({ onConfigUp
                                 role: "assistant",
                                 content: chatData.message,
                                 timestamp: new Date(),
+                                isError: chatData.is_error,
                             };
                             setMessages(prev => [...prev, assistantMessage]);
 
-                            if (Object.keys(chatData.template_updates).length > 0) {
+                            if (!chatData.is_error && Object.keys(chatData.template_updates).length > 0) {
                                 onConfigUpdate(chatData.template_updates);
                             }
 
-                            onReadyToSave(chatData.ready_to_save);
+                            if (!chatData.is_error) onReadyToSave(chatData.ready_to_save);
 
                             // Scroll to bottom after AI response
                             setTimeout(() => scrollToBottom(), 100);
@@ -129,6 +133,7 @@ export const PromptBuilderChat: React.FC<PromptBuilderChatProps> = ({ onConfigUp
                                 role: "assistant",
                                 content: "The conversation history is too long for automatic processing. Please describe your task manually, and I'll help you create a template.",
                                 timestamp: new Date(),
+                                isError: true,
                             };
                             setMessages(prev => [...prev, errorMessage]);
                         }
@@ -138,6 +143,7 @@ export const PromptBuilderChat: React.FC<PromptBuilderChatProps> = ({ onConfigUp
                             role: "assistant",
                             content: "I encountered an error processing your request. Please try describing your task manually.",
                             timestamp: new Date(),
+                            isError: true,
                         };
                         setMessages(prev => [...prev, errorMessage]);
                     } finally {
@@ -238,22 +244,24 @@ export const PromptBuilderChat: React.FC<PromptBuilderChatProps> = ({ onConfigUp
                 role: "assistant",
                 content: data.message,
                 timestamp: new Date(),
+                isError: data.is_error,
             };
             setMessages(prev => [...prev, assistantMessage]);
 
-            // Update config if there are updates
-            if (Object.keys(data.template_updates).length > 0) {
+            // Update config if there are updates (skip on error responses)
+            if (!data.is_error && Object.keys(data.template_updates).length > 0) {
                 onConfigUpdate(data.template_updates);
             }
 
             // Notify parent if ready to save
-            onReadyToSave(data.ready_to_save);
+            if (!data.is_error) onReadyToSave(data.ready_to_save);
         } catch (error) {
             console.error("Error sending message:", error);
             const errorMessage: Message = {
                 role: "assistant",
                 content: "I encountered an error. Could you please try again?",
                 timestamp: new Date(),
+                isError: true,
             };
             setMessages(prev => [...prev, errorMessage]);
         } finally {
@@ -294,8 +302,11 @@ export const PromptBuilderChat: React.FC<PromptBuilderChatProps> = ({ onConfigUp
             <div className="flex-1 space-y-4 overflow-y-auto p-4">
                 {messages.map((message, index) => (
                     <div key={index} className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}>
-                        <div className={`max-w-[80%] rounded-2xl px-4 py-3 ${message.role === "user" ? "bg-(--secondary-w20)" : ""}`}>
-                            <div className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</div>
+                        <div className={cn("max-w-[80%] rounded-2xl px-4 py-3", message.role === "user" && "bg-(--secondary-w20)", message.isError && "border border-(--error-wMain) bg-(--error-w10)")}>
+                            <div className={cn("text-sm leading-relaxed whitespace-pre-wrap", message.isError && "text-(--error-wMain)")}>
+                                {message.isError && <AlertCircle className="mr-1.5 -mt-0.5 inline-block h-4 w-4" />}
+                                {message.content}
+                            </div>
                         </div>
                     </div>
                 ))}