@burtson-labs/bandit-engine 2.0.120 → 2.0.121

package/dist/index.js

@@ -10940,7 +10940,7 @@ var init_chat = __esm({
   "src/chat/chat.css"() {
     "use strict";
     init_style_inject();
-    styleInject(".typing-only {\n  display: inline-flex;\n  gap: 0.4rem;\n  padding: 0;\n  background: transparent;\n  border-radius: 999px;\n  box-shadow: none;\n}\n.typing-only .dot {\n  width: 6px;\n  height: 6px;\n  background: #a78bfa;\n  border-radius: 50%;\n  animation: bounce 1.3s infinite ease-in-out;\n}\n.typing-only .dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.typing-only .dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n@keyframes bounce {\n  0%, 80%, 100% {\n    transform: translateY(0);\n    opacity: 0.3;\n  }\n  40% {\n    transform: translateY(-6px);\n    opacity: 1;\n  }\n}\n@keyframes float {\n  0% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-8px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n.logo-animated {\n  animation: pulseBandit 4s infinite ease-in-out;\n  transition: transform 0.3s ease-in-out;\n}\n@keyframes pulseBandit {\n  0% {\n    transform: scale(1) rotate(0deg);\n    opacity: 0.85;\n  }\n  50% {\n    transform: scale(1.05) rotate(1deg);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1) rotate(0deg);\n    opacity: 0.85;\n  }\n}\n.logo-container {\n  transition: opacity 0.5s ease, transform 0.5s ease;\n}\n.fade-in {\n  opacity: 1;\n  transform: scale(1);\n}\n.fade-out {\n  opacity: 0;\n  transform: translateY(-16px) scale(0.95);\n}\n@keyframes fadeOut {\n  to {\n    opacity: 0;\n    transform: translateY(-5px);\n    visibility: hidden;\n  }\n}\n");
+    styleInject(".typing-only {\n  display: inline-flex;\n  gap: 0.4rem;\n  padding: 0;\n  background: transparent;\n  border-radius: 999px;\n  box-shadow: none;\n}\n.typing-only .dot {\n  width: 6px;\n  height: 6px;\n  background: #a78bfa;\n  border-radius: 50%;\n  animation: bounce 1.3s infinite ease-in-out;\n}\n.typing-only .dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.typing-only .dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n@keyframes bounce {\n  0%, 80%, 100% {\n    transform: translateY(0);\n    opacity: 0.3;\n  }\n  40% {\n    transform: translateY(-6px);\n    opacity: 1;\n  }\n}\n.logo-container {\n  transition: opacity 0.5s ease, transform 0.5s ease;\n}\n.fade-in {\n  opacity: 1;\n  transform: scale(1);\n}\n.fade-out {\n  opacity: 0;\n  transform: translateY(-16px) scale(0.95);\n}\n@keyframes fadeOut {\n  to {\n    opacity: 0;\n    transform: translateY(-5px);\n    visibility: hidden;\n  }\n}\n");
   }
 });
 
@@ -10998,7 +10998,7 @@ var init_custom_logo = __esm({
           component: "img",
           src: logoBase64,
           alt: "Custom Logo",
-          className: `logo-container ${visible ? "fade-in" : "fade-out"} logo-animated`,
+          className: `logo-container ${visible ? "fade-in" : "fade-out"}`,
           sx: {
             width: isMobile ? "80vw" : "60vw",
             maxWidth: 600,
@@ -11013,7 +11013,7 @@ var init_custom_logo = __esm({
         {
           src: logoBase64,
           variant: "circular",
-          className: `logo-container ${visible ? "fade-in" : "fade-out"} logo-animated`,
+          className: `logo-container ${visible ? "fade-in" : "fade-out"}`,
           sx: {
             width: isMobile ? "50vw" : "400px",
             height: isMobile ? "50vw" : "400px",
@@ -30686,7 +30686,8 @@ var init_chat2 = __esm({
               if (brandingConfig) {
                 setBranding({
                   brandingText: brandingConfig.brandingText || "",
-                  logoBase64: brandingConfig.logoBase64 ?? void 0
+                  logoBase64: brandingConfig.logoBase64 ?? void 0,
+                  headerMode: brandingConfig.headerMode || "logo"
                 });
                 if (brandingConfig.brandingText) {
                   document.title = brandingConfig.brandingText;
@@ -30729,7 +30730,8 @@ var init_chat2 = __esm({
                   debugLogger.info("Loading branding and theme from CDN config");
                   setBranding({
                     brandingText: cdnBranding.brandingText,
-                    logoBase64: cdnBranding.logoBase64 ?? void 0
+                    logoBase64: cdnBranding.logoBase64 ?? void 0,
+                    headerMode: cdnBranding.headerMode || "logo"
                   });
                   if (cdnBranding.brandingText) {
                     document.title = cdnBranding.brandingText;
@@ -31410,7 +31412,44 @@ var init_chat2 = __esm({
                         pt: 2
                       },
                       children: [
-                        logoShouldRender && !brandingLoading && (branding?.logoBase64 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(custom_logo_default, { visible: logoVisible, atTop: true }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(bandit_chat_logo_default, { visible: logoVisible, atTop: true })),
+                        logoShouldRender && !brandingLoading && (() => {
+                          const headerMode = branding?.headerMode ?? "logo";
+                          if (headerMode === "minimal") {
+                            return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                              import_material32.Box,
+                              {
+                                sx: (theme) => ({
+                                  textAlign: "center",
+                                  mt: { xs: 6, md: 10 },
+                                  mb: 2,
+                                  px: 2,
+                                  opacity: logoVisible ? 1 : 0,
+                                  transition: "opacity 0.5s ease",
+                                  color: theme.palette.text.primary
+                                }),
+                                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_material32.Typography, { sx: { fontWeight: 500, fontSize: { xs: "1.5rem", md: "1.9rem" }, lineHeight: 1.2 }, children: "What can I help with?" })
+                              }
+                            );
+                          }
+                          if (headerMode === "text") {
+                            return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                              import_material32.Box,
+                              {
+                                sx: (theme) => ({
+                                  textAlign: "center",
+                                  mt: { xs: 6, md: 10 },
+                                  mb: 2,
+                                  px: 2,
+                                  opacity: logoVisible ? 1 : 0,
+                                  transition: "opacity 0.5s ease",
+                                  color: theme.palette.text.primary
+                                }),
+                                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_material32.Typography, { sx: { fontWeight: 600, fontSize: { xs: "1.6rem", md: "2.1rem" }, lineHeight: 1.2 }, children: branding?.brandingText?.trim() || "Bandit AI" })
+                              }
+                            );
+                          }
+                          return branding?.logoBase64 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(custom_logo_default, { visible: logoVisible, atTop: true }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(bandit_chat_logo_default, { visible: logoVisible, atTop: true });
+                        })(),
                         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                           import_material32.Box,
                           {
@@ -37847,37 +37886,50 @@ var LogoCropper = ({
     onClose();
   }, [onClose]);
   const handleCrop = (0, import_react52.useCallback)(() => {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
     const image = imageRef.current;
-    if (!ctx || !image) return;
+    if (!image) return;
     const cropDims = getCropDimensions();
+    const scene = document.createElement("canvas");
+    scene.width = CANVAS_SIZE;
+    scene.height = CANVAS_SIZE;
+    const sceneCtx = scene.getContext("2d");
+    if (!sceneCtx) return;
+    sceneCtx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
+    sceneCtx.save();
+    sceneCtx.translate(CANVAS_SIZE / 2, CANVAS_SIZE / 2);
+    sceneCtx.rotate(cropSettings.rotation * Math.PI / 180);
+    sceneCtx.scale(cropSettings.scale, cropSettings.scale);
+    sceneCtx.translate(-image.naturalWidth / 2 + cropSettings.x, -image.naturalHeight / 2 + cropSettings.y);
+    sceneCtx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
+    sceneCtx.restore();
+    const cropX = (CANVAS_SIZE - cropDims.width) / 2;
+    const cropY = (CANVAS_SIZE - cropDims.height) / 2;
     const finalSize = LOGO_OUTPUT_SIZES[outputSize];
-    const aspectRatioValue = cropDims.width / cropDims.height;
+    const cropAspect = cropDims.width / cropDims.height;
     let outputWidth = finalSize;
     let outputHeight = finalSize;
-    if (aspectRatio !== "square") {
-      if (aspectRatioValue > 1) {
-        outputHeight = finalSize / aspectRatioValue;
-      } else {
-        outputWidth = finalSize * aspectRatioValue;
-      }
+    if (cropAspect > 1) {
+      outputHeight = Math.round(finalSize / cropAspect);
+    } else if (cropAspect < 1) {
+      outputWidth = Math.round(finalSize * cropAspect);
     }
+    const canvas = document.createElement("canvas");
     canvas.width = outputWidth;
     canvas.height = outputHeight;
-    ctx.save();
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
     ctx.clearRect(0, 0, outputWidth, outputHeight);
-    const scaleX = outputWidth / cropDims.width;
-    const scaleY = outputHeight / cropDims.height;
-    ctx.translate(outputWidth / 2, outputHeight / 2);
-    ctx.rotate(cropSettings.rotation * Math.PI / 180);
-    ctx.scale(cropSettings.scale * scaleX, cropSettings.scale * scaleY);
-    ctx.translate(
-      -image.naturalWidth / 2 + cropSettings.x * scaleX,
-      -image.naturalHeight / 2 + cropSettings.y * scaleY
+    ctx.drawImage(
+      scene,
+      cropX,
+      cropY,
+      cropDims.width,
+      cropDims.height,
+      0,
+      0,
+      outputWidth,
+      outputHeight
     );
-    ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
-    ctx.restore();
     const croppedDataUrl = canvas.toDataURL("image/png", 1);
     onCrop(croppedDataUrl);
     setImageSrc("");
@@ -37885,7 +37937,7 @@ var LogoCropper = ({
     setCropSettings({ x: 0, y: 0, scale: 1, rotation: 0 });
     setAspectRatio("square");
     onClose();
-  }, [cropSettings, onCrop, getCropDimensions, outputSize, aspectRatio, onClose]);
+  }, [cropSettings, onCrop, getCropDimensions, outputSize, onClose]);
   const handleScaleChange = (0, import_react52.useCallback)((value) => {
     const cropDims = getCropDimensions();
     const minScale2 = Math.max(
@@ -37919,8 +37971,8 @@ var LogoCropper = ({
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.DialogTitle, { sx: { pb: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "h6", sx: { fontWeight: 600 }, children: "\u{1F3A8} Crop Your Logo" }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "body2", color: "text.secondary", children: "Position, resize, and format your logo for perfect branding" })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "h6", sx: { fontWeight: 600 }, children: "Crop Logo" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "body2", color: "text.secondary", children: "Position and size your logo. The selected region is exported at its true aspect ratio." })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.DialogContent, { children: imageSrc && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -37984,7 +38036,7 @@ var LogoCropper = ({
                         pointerEvents: "none",
                         opacity: 0.9
                       },
-                      children: "Drag to reposition \u2022 Blue area will be exported"
+                      children: "Drag to reposition \u2014 the outlined area is exported"
                     }
                   )
                 ]
@@ -37993,7 +38045,7 @@ var LogoCropper = ({
             /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { sx: { width: 300, display: "flex", flexDirection: "column", gap: 3 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Typography, { variant: "body2", sx: { mb: 1, fontWeight: 600 }, children: [
-                  "\u{1F4CB} Preview (",
+                  "Preview (",
                   LOGO_OUTPUT_SIZES[outputSize],
                   "px)"
                 ] }),
@@ -38013,7 +38065,7 @@ var LogoCropper = ({
                 ) })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "body2", sx: { mb: 1, fontWeight: 600 }, children: "\u{1F4D0} Aspect Ratio" }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "body2", sx: { mb: 1, fontWeight: 600 }, children: "Aspect Ratio" }),
                 /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
                   import_material43.ToggleButtonGroup,
                   {
@@ -38040,7 +38092,7 @@ var LogoCropper = ({
                 )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "body2", sx: { mb: 1, fontWeight: 600 }, children: "\u{1F4CF} Output Size" }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "body2", sx: { mb: 1, fontWeight: 600 }, children: "Output Size" }),
                 /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
                   import_material43.ToggleButtonGroup,
                   {
@@ -38059,7 +38111,7 @@ var LogoCropper = ({
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Typography, { variant: "body2", sx: { mb: 1, fontWeight: 600 }, children: [
-                  "\u{1F50D} Zoom: ",
+                  "Zoom: ",
                   Math.round(cropSettings.scale * 100),
                   "%"
                 ] }),
@@ -38096,7 +38148,7 @@ var LogoCropper = ({
                 ] })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "body2", sx: { mb: 1, fontWeight: 600 }, children: "\u{1F504} Rotation" }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "body2", sx: { mb: 1, fontWeight: 600 }, children: "Rotation" }),
                 /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Box, { sx: { display: "flex", gap: 1 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     import_material43.Button,
@@ -38131,26 +38183,7 @@ var LogoCropper = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Alert, { severity: "success", sx: { borderRadius: 2 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "body2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("strong", { children: "\u2728 Logo Features:" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_material43.Typography, { variant: "body2", sx: { mt: 0.5, fontSize: "0.8rem" }, children: [
-                  "\u2022 ",
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("strong", { children: "Transparency preserved" }),
-                  " for clean logos",
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("br", {}),
-                  "\u2022 ",
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("strong", { children: "High quality PNG" }),
-                  " output",
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("br", {}),
-                  "\u2022 ",
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("strong", { children: "Multiple sizes" }),
-                  " for different uses",
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("br", {}),
-                  "\u2022 ",
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("strong", { children: "Perfect for branding" }),
-                  " across platforms"
-                ] })
-              ] })
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Alert, { severity: "info", variant: "outlined", sx: { borderRadius: 2, py: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { variant: "caption", sx: { fontSize: "0.75rem", lineHeight: 1.5 }, children: "Exported as a transparent PNG at the selected aspect ratio. Wide logos stay wide." }) })
             ] })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Box, { sx: { display: "flex", justifyContent: "center", py: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_material43.Typography, { children: "Loading image..." }) })
         ] }) }),
@@ -38166,7 +38199,7 @@ var LogoCropper = ({
                 px: 3,
                 fontWeight: 600
               },
-              children: "\u2702\uFE0F Crop Logo"
+              children: "Apply Crop"
             }
           )
         ] })
@@ -38186,6 +38219,8 @@ var BrandingTab = ({
   logoBase64,
   brandingText,
   setBrandingText,
+  headerMode,
+  setHeaderMode,
   theme,
   setTheme,
   predefinedThemes: predefinedThemes2,
@@ -38368,10 +38403,9 @@ var BrandingTab = ({
             import_material44.Box,
             {
               sx: {
-                width: { xs: "100%", md: "26%" },
+                width: { xs: "100%", md: "34%" },
                 display: "flex",
                 flexDirection: "column",
-                height: { xs: "auto", md: 260 },
                 gap: { xs: 1.5, md: 0 }
               },
               children: [
@@ -38482,22 +38516,47 @@ var BrandingTab = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Box, { sx: { mt: 1.5, flex: "0 0 auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                  import_material44.TextField,
-                  {
-                    label: "Custom Branding Text",
-                    variant: "outlined",
-                    value: brandingText,
-                    onChange: (e) => setBrandingText(e.target.value),
-                    fullWidth: true,
-                    placeholder: "e.g., Powered by YourCompany",
-                    size: "small",
-                    sx: {
-                      "& .MuiInputBase-root": { fontSize: "0.85rem" },
-                      "& .MuiFormHelperText-root": { fontSize: "0.7rem" }
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material44.Box, { sx: { mt: 1.5, flex: "0 0 auto", display: "flex", flexDirection: "column", gap: 1.25 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    import_material44.TextField,
+                    {
+                      label: "Custom Branding Text",
+                      variant: "outlined",
+                      value: brandingText,
+                      onChange: (e) => setBrandingText(e.target.value),
+                      fullWidth: true,
+                      placeholder: "e.g., Powered by YourCompany",
+                      size: "small",
+                      sx: {
+                        "& .MuiInputBase-root": { fontSize: "0.85rem" },
+                        "& .MuiFormHelperText-root": { fontSize: "0.7rem" }
+                      }
                     }
-                  }
-                ) })
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material44.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Typography, { variant: "overline", sx: { mb: 0.5, fontWeight: 700, fontSize: "0.7rem", letterSpacing: 0.6, color: "text.secondary", display: "block" }, children: "Welcome Header" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                      import_material44.ToggleButtonGroup,
+                      {
+                        value: headerMode,
+                        exclusive: true,
+                        onChange: (_, mode) => mode && setHeaderMode(mode),
+                        size: "small",
+                        fullWidth: true,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.ToggleButton, { value: "logo", sx: { fontSize: "0.7rem", py: 0.4, textTransform: "none" }, children: "Logo" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.ToggleButton, { value: "text", sx: { fontSize: "0.7rem", py: 0.4, textTransform: "none" }, children: "Text" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.ToggleButton, { value: "minimal", sx: { fontSize: "0.7rem", py: 0.4, textTransform: "none" }, children: "Minimal" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material44.Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 0.5, fontSize: "0.68rem", lineHeight: 1.4 }, children: [
+                      headerMode === "logo" && "Show the brand logo above the chat.",
+                      headerMode === "text" && "Show branding text only, no logo.",
+                      headerMode === "minimal" && "No logo or text \u2014 clean greeting only."
+                    ] })
+                  ] })
+                ] })
               ]
             }
           ),
@@ -38507,79 +38566,65 @@ var BrandingTab = ({
               import_material44.Box,
               {
                 sx: {
-                  height: { xs: 220, md: 260 },
+                  height: { xs: 180, md: 200 },
                   display: "flex",
                   flexDirection: "column",
                   position: "relative",
                   bgcolor: "background.default",
                   borderRadius: 2,
                   overflow: "hidden",
+                  border: "1px solid",
+                  borderColor: "divider",
                   px: 2,
-                  py: 2
+                  py: 1.5
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Box, { sx: {
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material44.Box, { sx: {
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
                     flex: "1 1 auto",
                     minHeight: 0
-                  }, children: logoBase64 || getDefaultLogo() ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                    "img",
-                    {
-                      src: logoBase64 || getDefaultLogo(),
-                      alt: "Logo Preview",
-                      style: {
-                        maxWidth: "320px",
-                        height: "auto",
-                        imageRendering: "auto",
-                        objectFit: "contain",
-                        filter: "contrast(1.1) saturate(1.05)"
-                      }
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material44.Box, { sx: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    gap: 0.5
                   }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                    headerMode === "logo" && (logoBase64 || getDefaultLogo() ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                      "img",
+                      {
+                        src: logoBase64 || getDefaultLogo(),
+                        alt: "Logo Preview",
+                        style: {
+                          maxWidth: "240px",
+                          maxHeight: "100%",
+                          height: "auto",
+                          imageRendering: "auto",
+                          objectFit: "contain",
+                          filter: "contrast(1.1) saturate(1.05)"
+                        }
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                       import_material44.Skeleton,
                       {
                         variant: "rectangular",
-                        width: 160,
-                        height: 40,
+                        width: 140,
+                        height: 36,
                         sx: {
                           borderRadius: 2,
                           bgcolor: (theme2) => theme2.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"
                         }
                       }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Typography, { variant: "caption", color: "text.disabled", sx: { fontSize: "0.7rem" }, children: "Logo preview" })
-                  ] }) }),
+                    )),
+                    headerMode === "text" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Typography, { variant: "h6", sx: { fontWeight: 600, color: "text.primary", textAlign: "center" }, children: brandingText || "Bandit AI" }),
+                    headerMode === "minimal" && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Typography, { variant: "h6", sx: { fontWeight: 500, color: "text.secondary", textAlign: "center" }, children: "What can I help with?" })
+                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material44.Box, { sx: {
                     display: "flex",
                     flexDirection: "column",
                     alignItems: "center",
                     width: "100%",
                     flex: "0 0 auto",
-                    gap: 1
+                    gap: 0.75
                   }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Stack, { direction: "row", spacing: 1, justifyContent: "center", sx: { flexWrap: "wrap", gap: 1 }, children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                      import_material44.Skeleton,
-                      {
-                        variant: "rectangular",
-                        width: 80,
-                        height: 24,
-                        sx: {
-                          borderRadius: 2,
-                          bgcolor: (theme2) => theme2.palette.mode === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
-                        }
-                      },
-                      i
-                    )) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Paper, { elevation: 3, sx: { px: 2, py: 1.5, borderRadius: 2, width: "100%", maxWidth: 500 }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Typography, { variant: "body1", sx: { color: "text.secondary" }, children: "What's on your mind?" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material44.Typography, { variant: "caption", sx: { textAlign: "center", color: "text.secondary", mt: 1 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Paper, { elevation: 2, sx: { px: 2, py: 1, borderRadius: 2, width: "100%", maxWidth: 440 }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Typography, { variant: "body2", sx: { color: "text.secondary" }, children: "What's on your mind?" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material44.Typography, { variant: "caption", sx: { textAlign: "center", color: "text.secondary", fontSize: "0.68rem" }, children: [
                       brandingText ? `${brandingText} \u2022 ` : "Bandit AI \u2022 ",
                       "may be wrong \u2014 double-check important info."
                     ] })
@@ -38740,7 +38785,7 @@ var BrandingTab = ({
             disabled: saveStatus === "saving",
             color: saveStatus === "saved" ? "success" : saveStatus === "error" ? "error" : "primary",
             sx: { height: 36, fontSize: "0.8rem" },
-            children: saveStatus === "saving" ? "Saving..." : saveStatus === "saved" ? "\u2713 Saved" : saveStatus === "error" ? "\u2717 Error" : "Save"
+            children: saveStatus === "saving" ? "Saving..." : saveStatus === "saved" ? "Saved" : saveStatus === "error" ? "Error" : "Save"
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material44.Box, { sx: { flexBasis: { xs: "calc(50% - 4px)", sm: "calc(25% - 6px)" } }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -44401,6 +44446,7 @@ var Management = () => {
   const [logoFile, setLogoFile] = (0, import_react63.useState)(null);
   const [logoBase64, setLogoBase64] = (0, import_react63.useState)(null);
   const [brandingText, setBrandingText] = (0, import_react63.useState)("");
+  const [headerMode, setHeaderMode] = (0, import_react63.useState)("logo");
   const [theme, setTheme] = (0, import_react63.useState)("bandit-dark");
   const [customAvatarBase64, setCustomAvatarBase64] = (0, import_react63.useState)(null);
   const [presetAvatar, setPresetAvatar] = (0, import_react63.useState)(null);
@@ -44494,6 +44540,7 @@ var Management = () => {
           hasCustomTheme: !!(brandingConfig?.theme && brandingConfig.theme !== "bandit-dark")
         });
         setBrandingText(brandingConfig?.brandingText || "");
+        setHeaderMode(brandingConfig?.headerMode || "logo");
         setTheme(brandingConfig?.theme || "bandit-dark");
         setLogoBase64(brandingConfig?.logoBase64 || null);
         if (brandingConfig?.hasTransparentLogo !== void 0) {
@@ -44519,6 +44566,7 @@ var Management = () => {
         if (cdnBranding) {
           debugLogger.info("Applying CDN branding");
           setBrandingText(cdnBranding.brandingText || "");
+          setHeaderMode(cdnBranding.headerMode || "logo");
           setTheme(cdnBranding.theme || "bandit-dark");
           setLogoBase64(cdnBranding.logoBase64 || null);
           if (cdnBranding.hasTransparentLogo !== void 0) {
@@ -44717,6 +44765,7 @@ var Management = () => {
         branding: {
           logoBase64,
           brandingText,
+          headerMode,
           theme,
           hasTransparentLogo: finalHasTransparentLogo,
           userSaved: true
@@ -44775,6 +44824,7 @@ var Management = () => {
       branding: {
         logoBase64: logoBase64 || "",
         brandingText: brandingText || "",
+        headerMode,
         theme,
         hasTransparentLogo: hasLogo ? await detectTransparency(logoBase64) : false
       },
@@ -44819,6 +44869,7 @@ var Management = () => {
     if (cdnBranding) {
       setLogoBase64(cdnBranding.logoBase64 || null);
       setBrandingText(cdnBranding.brandingText || "");
+      setHeaderMode(cdnBranding.headerMode || "logo");
       setTheme(cdnBranding.theme || "bandit-dark");
       if (cdnBranding.hasTransparentLogo !== void 0) {
         setHasTransparentLogo(cdnBranding.hasTransparentLogo);
@@ -44829,6 +44880,7 @@ var Management = () => {
     } else {
       setLogoBase64(null);
       setBrandingText("");
+      setHeaderMode("logo");
       setTheme("bandit-dark");
       setHasTransparentLogo(true);
       debugLogger.info("Applied Bandit default branding");
@@ -44853,6 +44905,7 @@ var Management = () => {
       } : {
         logoBase64: null,
         brandingText: "",
+        headerMode: "logo",
         theme: "bandit-dark",
         hasTransparentLogo: true,
         userSaved: false
@@ -44952,6 +45005,7 @@ var Management = () => {
           const data = JSON.parse(e.target?.result);
           if (data.branding) {
             setBrandingText(data.branding.brandingText || "");
+            setHeaderMode(data.branding.headerMode || "logo");
             setTheme(data.branding.theme || "Dark");
             setLogoBase64(data.branding.logoBase64 || null);
             setLogoFile(null);
@@ -45596,6 +45650,8 @@ var Management = () => {
                     logoBase64,
                     brandingText,
                     setBrandingText,
+                    headerMode,
+                    setHeaderMode,
                     theme,
                     setTheme,
                     predefinedThemes,