@blade-hq/agent-kit 0.4.6 → 0.4.8

package/dist/{chunk-LIL4FIZP.js → chunk-QO6CO372.js}

@@ -3,7 +3,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
   resolveSessionFilePreviewTarget
-} from "./chunk-VD4CKRMT.js";
+} from "./chunk-MAMDVXTM.js";
 import {
   AskUserQuestionBlock,
   CardCodeBlock,
@@ -13,7 +13,7 @@ import {
   extractLatestPlanMessages,
   parseAskUserQuestion,
   useHighlightedCodeHtml
-} from "./chunk-X6MEYCU7.js";
+} from "./chunk-YFKHSFRB.js";
 import {
   buildMessageContent,
   buildToolPreviewKey,
@@ -55,7 +55,7 @@ import {
   useUiBridgeStore,
   useUiStore,
   writeFile
-} from "./chunk-4VWLTG5L.js";
+} from "./chunk-TWZHUASA.js";
 import {
   registerBridgeIframe,
   tapBridgeEvent
@@ -64,7 +64,7 @@ import {
   ModelOption,
   ModelsConfig,
   ModelsResource
-} from "./chunk-OKQWPNE3.js";
+} from "./chunk-DNT6RM5E.js";
 import {
   cn,
   copyToClipboard
@@ -174,7 +174,13 @@ import {
   X as X2
 } from "lucide-react";
 import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
-import { useEffect as useEffect7, useEffectEvent as useEffectEvent2, useMemo as useMemo6, useRef as useRef4, useState as useState6 } from "react";
+import {
+  useEffect as useEffect7,
+  useEffectEvent as useEffectEvent2,
+  useMemo as useMemo6,
+  useRef as useRef4,
+  useState as useState6
+} from "react";
 import { createRoot } from "react-dom/client";
 import { toast } from "sonner";
 
@@ -1532,7 +1538,9 @@ function SkillStatusBar({
   sessionId,
   onResync,
   isResyncing = false,
-  vertical = false
+  vertical = false,
+  className,
+  innerClassName
 }) {
   const { data: skillStats, error, loading } = useSkillStats(sessionId);
   const { data: sessionSkills = [] } = useQuery5({
@@ -1598,7 +1606,7 @@ function SkillStatusBar({
   const containerClass = vertical ? "text-[11px] text-[hsl(var(--muted-foreground))]" : "bg-[hsl(var(--background))] px-5 pt-2";
   const innerClass = vertical ? "" : "mx-auto max-w-3xl";
   const listClass = vertical ? "flex flex-col items-stretch gap-1.5 text-[11px] text-[hsl(var(--muted-foreground))]" : "flex flex-wrap items-center gap-2 text-[10px] text-[hsl(var(--muted-foreground))]";
-  return /* @__PURE__ */ jsx7("div", { className: containerClass, children: /* @__PURE__ */ jsx7("div", { className: innerClass, children: /* @__PURE__ */ jsxs6("div", { className: listClass, children: [
+  return /* @__PURE__ */ jsx7("div", { className: cn(containerClass, className), children: /* @__PURE__ */ jsx7("div", { className: cn(innerClass, innerClassName), children: /* @__PURE__ */ jsxs6("div", { className: listClass, children: [
     tokenSummary ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--card))] px-2.5 py-1", children: [
       /* @__PURE__ */ jsx7(
         ProgressCircle,
@@ -2384,6 +2392,11 @@ function ChatInput({
   externalDraft,
   externalAttachments,
   maxWidthClassName = "max-w-3xl",
+  className,
+  innerClassName,
+  SkillStatusBarComponent = SkillStatusBar,
+  skillStatusBarClassName,
+  skillStatusBarInnerClassName,
   onResyncSkills,
   isResyncingSkills = false
 }) {
@@ -3019,7 +3032,7 @@ function ChatInput({
   const hasValidAttachments = composerAttachments.some((attachment) => attachment.status !== "failed");
   const isSendDisabled = connectionStatus !== "connected" || hasUploadingFiles || !input.trim() && !hasValidAttachments && !hasRenderedAttachments && !hasPendingContexts;
   return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsx8("div", { className: "bg-[hsl(var(--background))] px-5 py-3", children: /* @__PURE__ */ jsx8("div", { className: `mx-auto ${maxWidthClassName}`, children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx8("div", { className: `bg-[hsl(var(--background))] px-5 py-3 ${className ?? ""}`, children: /* @__PURE__ */ jsx8("div", { className: `mx-auto ${maxWidthClassName} ${innerClassName ?? ""}`, children: /* @__PURE__ */ jsx8(
       "div",
       {
         className: "relative",
@@ -3321,12 +3334,14 @@ function ChatInput({
                     ),
                     /* @__PURE__ */ jsx8("div", { className: "pointer-events-auto absolute bottom-full right-0 z-30 hidden pb-2 group-hover/help:block group-focus-within/help:block", children: /* @__PURE__ */ jsxs7("div", { className: "min-w-64 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-3 text-left text-[11px] leading-5 text-[hsl(var(--popover-foreground))] shadow-lg", children: [
                       activeSessionId ? /* @__PURE__ */ jsx8("div", { className: "mb-2 border-b border-[hsl(var(--border))] pb-2", children: /* @__PURE__ */ jsx8(
-                        SkillStatusBar,
+                        SkillStatusBarComponent,
                         {
                           sessionId: activeSessionId,
                           onResync: onResyncSkills,
                           isResyncing: isResyncingSkills,
-                          vertical: true
+                          vertical: true,
+                          className: skillStatusBarClassName,
+                          innerClassName: skillStatusBarInnerClassName
                         }
                       ) }) : null,
                       /* @__PURE__ */ jsxs7("div", { className: "space-y-0.5", children: [
@@ -5256,7 +5271,8 @@ function ToolCallBlock({
   sessionStatus,
   level = 1,
   turnBlocks,
-  reasoning
+  reasoning,
+  customization
 }) {
   const [expanded, setExpanded] = useState12(false);
   const activeSessionId = useSessionStore((s) => s.activeSessionId);
@@ -5309,13 +5325,13 @@ function ToolCallBlock({
   const loadedSkillName = normalizedName === "LoadSkillTools" ? extractLoadedSkillName(toolCall) : null;
   const tone = getToolTone(toolCall.status);
   const displayName = getToolDisplayLabel(toolCall);
-  const Renderer = getRenderer(normalizedName);
+  const Renderer = customization?.renderers?.tool?.[normalizedName] ?? getRenderer(normalizedName);
   const borderWidthClass = level === 2 ? "border-l-[2px]" : "border-l-[3px]";
   const indentClass = level === 2 ? "ml-3" : "ml-4";
   const toneClass = tone === "red" ? "border-l-[hsl(var(--muted-foreground)/0.5)]" : tone === "amber" ? "border-l-amber-400" : tone === "blue" ? "border-l-blue-500" : "border-l-[hsl(var(--primary))]";
   const statusIcon = toolCall.status === "pending" ? /* @__PURE__ */ jsx19(Loader23, { size: 11, className: "animate-spin" }) : toolCall.status === "awaiting_answer" ? /* @__PURE__ */ jsx19(MessageSquareMore, { size: 11 }) : toolCall.status === "cancelled" || toolCall.status === "error" ? /* @__PURE__ */ jsx19(X4, { size: 11 }) : /* @__PURE__ */ jsx19(Check, { size: 11 });
   const statusTextClass = tone === "red" ? "text-[hsl(var(--muted-foreground))]" : tone === "amber" ? "text-amber-300" : tone === "blue" ? "text-blue-300" : "text-[hsl(var(--primary))]";
-  return /* @__PURE__ */ jsxs15("div", { className: cn(indentClass, "text-xs"), children: [
+  return /* @__PURE__ */ jsxs15("div", { className: cn(indentClass, "text-xs", customization?.classNames?.toolCall), children: [
     /* @__PURE__ */ jsxs15("div", { className: cn(borderWidthClass, toneClass, "flex items-center gap-2 px-3 py-2"), children: [
       /* @__PURE__ */ jsxs15(
         "button",
@@ -5939,7 +5955,7 @@ function buildSessionFileUrl(sessionId, filePath) {
     `/api/sessions/${encodeURIComponent(sessionId)}/files/${encodeURIComponent(filePath)}`
   );
 }
-function UserMessageBubble({ message }) {
+function UserMessageBubble({ message, className }) {
   const activeSessionId = useSessionStore((state) => state.activeSessionId);
   const _textContent = getTextContent(message.content);
   const fileParts = getFileParts(message.content);
@@ -6008,7 +6024,7 @@ function UserMessageBubble({ message }) {
     const mode = kind === "text" ? lower2.endsWith(".md") ? "markdown" : "text" : "default";
     setPreview({ filename: attachment.name, url, mode });
   };
-  return /* @__PURE__ */ jsx27("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs22("div", { className: "group flex max-w-[72%] flex-col items-end gap-3", children: [
+  return /* @__PURE__ */ jsx27("div", { className: cn("flex justify-end", className), children: /* @__PURE__ */ jsxs22("div", { className: "group flex max-w-[72%] flex-col items-end gap-3", children: [
     (imageParts.length > 0 || imageTextAttachments.length > 0) && /* @__PURE__ */ jsxs22("div", { className: "grid gap-2", children: [
       imageParts.map((part, idx) => /* @__PURE__ */ jsx27(
         "button",
@@ -6096,10 +6112,13 @@ function UserMessageBubble({ message }) {
     )
   ] }) });
 }
-function ErrorMessageBlock({ message }) {
+function ErrorMessageBlock({
+  message,
+  className
+}) {
   const text = getTextContent(message.content);
   const looksLikeModelUnavailable = /no source matches this model|404/i.test(text);
-  return /* @__PURE__ */ jsx27("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs22("div", { className: "max-w-[85%] border-l-[3px] border-[hsl(var(--destructive))] px-4 py-1 text-sm leading-7 text-[hsl(var(--destructive))]", children: [
+  return /* @__PURE__ */ jsx27("div", { className: cn("flex justify-center", className), children: /* @__PURE__ */ jsxs22("div", { className: "max-w-[85%] border-l-[3px] border-[hsl(var(--destructive))] px-4 py-1 text-sm leading-7 text-[hsl(var(--destructive))]", children: [
     text,
     looksLikeModelUnavailable ? /* @__PURE__ */ jsx27("div", { className: "mt-1 opacity-80", children: "\u6A21\u578B\u53EF\u80FD\u672A\u542F\u52A8\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5\u3002" }) : null
   ] }) });
@@ -6639,7 +6658,8 @@ function AssistantTurnBlock({
   onAnswer,
   sessionStatus,
   level = 1,
-  forceExpanded = false
+  forceExpanded = false,
+  customization
 }) {
   const messages = Array.isArray(rawMessages) ? rawMessages : [];
   const allToolCalls = useMemo14(() => messages.flatMap((m) => m.tool_calls ?? []), [messages]);
@@ -6670,60 +6690,72 @@ function AssistantTurnBlock({
   const hasInterruptedState = messages.some((message) => message.status === "interrupted");
   const effectiveMode = isStreaming ? "detail" : displayMode === "compact" && hasActionableToolCall ? "detail" : displayMode;
   const memoryRefs = Array.isArray(messages[0]?.memory_refs) ? messages[0].memory_refs : [];
-  return /* @__PURE__ */ jsxs24("div", { className: cn("flex flex-col gap-3", level === 2 && "gap-2.5"), children: [
-    memoryRefs.length > 0 && /* @__PURE__ */ jsx29(MemoryRefsHint, { refs: memoryRefs }),
-    hasInterruptedState && /* @__PURE__ */ jsx29("div", { className: "ml-4 w-fit rounded-full border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.12em] text-amber-300", children: "\u5DF2\u4E2D\u65AD" }),
-    !isStreaming && /* @__PURE__ */ jsx29("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs24(
-      "button",
-      {
-        type: "button",
-        onClick: () => setDisplayMode(displayMode === "detail" ? "compact" : "detail"),
-        className: "inline-flex shrink-0 items-center gap-1 text-xs text-[hsl(var(--muted-foreground))] transition-colors hover:text-[hsl(var(--foreground))]",
-        children: [
-          /* @__PURE__ */ jsx29("span", { children: effectiveMode === "detail" ? "\u7CBE\u7B80" : "\u8BE6\u7EC6" }),
-          /* @__PURE__ */ jsx29(
-            ChevronRight5,
-            {
-              size: 18,
-              className: cn("transition-transform", effectiveMode === "detail" && "rotate-180")
-            }
-          )
-        ]
-      }
-    ) }),
-    effectiveMode === "detail" ? /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsx29(
-      AssistantMessages,
-      {
-        messages,
-        isStreaming,
-        sessionId,
-        askAnswers,
-        onAnswer,
-        sessionStatus,
-        level,
-        showToolDetails: true
-      }
-    ) }) : /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-4", children: [
-      resourceBlocks.length > 0 ? /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-3", children: resourceBlocks.map((block) => /* @__PURE__ */ jsx29(ResourceIframe, { ui: block.ui, sessionId }, block.key)) }) : null,
-      finalMessage ? /* @__PURE__ */ jsx29(
-        "div",
-        {
-          className: cn(
-            resourceBlocks.length > 0 && "border-t border-[hsl(var(--border))] pt-4"
-          ),
-          children: /* @__PURE__ */ jsx29(
-            AssistantMessageContent,
+  return /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-3",
+        level === 2 && "gap-2.5",
+        customization?.classNames?.assistantTurn
+      ),
+      children: [
+        memoryRefs.length > 0 && /* @__PURE__ */ jsx29(MemoryRefsHint, { refs: memoryRefs }),
+        hasInterruptedState && /* @__PURE__ */ jsx29("div", { className: "ml-4 w-fit rounded-full border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.12em] text-amber-300", children: "\u5DF2\u4E2D\u65AD" }),
+        !isStreaming && /* @__PURE__ */ jsx29("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs24(
+          "button",
+          {
+            type: "button",
+            onClick: () => setDisplayMode(displayMode === "detail" ? "compact" : "detail"),
+            className: "inline-flex shrink-0 items-center gap-1 text-xs text-[hsl(var(--muted-foreground))] transition-colors hover:text-[hsl(var(--foreground))]",
+            children: [
+              /* @__PURE__ */ jsx29("span", { children: effectiveMode === "detail" ? "\u7CBE\u7B80" : "\u8BE6\u7EC6" }),
+              /* @__PURE__ */ jsx29(
+                ChevronRight5,
+                {
+                  size: 18,
+                  className: cn("transition-transform", effectiveMode === "detail" && "rotate-180")
+                }
+              )
+            ]
+          }
+        ) }),
+        effectiveMode === "detail" ? /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-3", children: /* @__PURE__ */ jsx29(
+          AssistantMessages,
+          {
+            messages,
+            isStreaming,
+            sessionId,
+            askAnswers,
+            onAnswer,
+            sessionStatus,
+            level,
+            showToolDetails: true,
+            customization
+          }
+        ) }) : /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-4", children: [
+          resourceBlocks.length > 0 ? /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-3", children: resourceBlocks.map((block) => /* @__PURE__ */ jsx29(ResourceIframe, { ui: block.ui, sessionId }, block.key)) }) : null,
+          finalMessage ? /* @__PURE__ */ jsx29(
+            "div",
             {
-              message: finalMessage,
-              isStreaming: isStreaming && finalMessage === messages[messages.length - 1],
-              sessionId,
-              reasoning: finalMessage.reasoning
+              className: cn(
+                resourceBlocks.length > 0 && "border-t border-[hsl(var(--border))] pt-4"
+              ),
+              children: /* @__PURE__ */ jsx29(
+                AssistantMessageContent,
+                {
+                  message: finalMessage,
+                  isStreaming: isStreaming && finalMessage === messages[messages.length - 1],
+                  sessionId,
+                  reasoning: finalMessage.reasoning,
+                  className: customization?.classNames?.assistantText
+                }
+              )
             }
-          )
-        }
-      ) : isStreaming ? /* @__PURE__ */ jsx29("span", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: "\u6B63\u5728\u751F\u6210..." }) : null
-    ] }) })
-  ] });
+          ) : isStreaming ? /* @__PURE__ */ jsx29("span", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: "\u6B63\u5728\u751F\u6210..." }) : null
+        ] }) })
+      ]
+    }
+  );
 }
 function AssistantMessages({
   messages,
@@ -6733,7 +6765,8 @@ function AssistantMessages({
   onAnswer,
   sessionStatus,
   level,
-  showToolDetails
+  showToolDetails,
+  customization
 }) {
   return messages.map(
     (message, index) => isRenderableAssistantMessage(message, isStreaming && index === messages.length - 1) ? (() => {
@@ -6763,7 +6796,8 @@ function AssistantMessages({
                 message,
                 isStreaming: isStreamingLastMessage,
                 sessionId,
-                reasoning: contentReasoning
+                reasoning: contentReasoning,
+                className: customization?.classNames?.assistantText
               }
             ),
             hasToolCalls && showToolDetails && /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-2", children: toolRenderItems.map((item) => {
@@ -6779,7 +6813,8 @@ function AssistantMessages({
                     askAnswers,
                     onAnswer,
                     turnBlocks: message.blocks,
-                    level
+                    level,
+                    customization
                   },
                   item.key
                 );
@@ -6793,6 +6828,21 @@ function AssistantMessages({
                   reasoning: toolCall.id === firstToolCallId ? toolReasoning : void 0
                 },
                 toolCall.id
+              ) : customization?.components?.ToolCall ? /* @__PURE__ */ jsx29(
+                customization.components.ToolCall,
+                {
+                  toolCall,
+                  answerData: askAnswers?.[toolCall.id],
+                  onAnswer,
+                  answered: sessionStatus !== "waiting_for_input",
+                  sessionId,
+                  sessionStatus,
+                  level,
+                  turnBlocks: message.blocks,
+                  reasoning: toolCall.id === firstToolCallId ? toolReasoning : void 0,
+                  customization
+                },
+                toolCall.id
               ) : /* @__PURE__ */ jsx29(
                 ToolCallBlock,
                 {
@@ -6804,7 +6854,8 @@ function AssistantMessages({
                   sessionStatus,
                   level,
                   turnBlocks: message.blocks,
-                  reasoning: toolCall.id === firstToolCallId ? toolReasoning : void 0
+                  reasoning: toolCall.id === firstToolCallId ? toolReasoning : void 0,
+                  customization
                 },
                 toolCall.id
               );
@@ -6842,7 +6893,8 @@ function CompactToolGroupBlock({
   askAnswers,
   onAnswer,
   turnBlocks,
-  level
+  level,
+  customization
 }) {
   const [expanded, setExpanded] = useState16(false);
   const indentClass = level === 2 ? "ml-3" : "ml-4";
@@ -6905,27 +6957,46 @@ function CompactToolGroupBlock({
       reasoning ? /* @__PURE__ */ jsx29(ThinkingBadge, { reasoning, variant: "block" }) : null,
       totalDurationMs > 0 ? /* @__PURE__ */ jsx29("span", { className: "shrink-0 font-mono text-[10px] text-[hsl(var(--muted-foreground))]", children: formatToolDuration2(totalDurationMs) }) : null
     ] }),
-    expanded ? /* @__PURE__ */ jsx29("div", { className: "mt-1 flex flex-col gap-1", children: toolCalls.map((toolCall) => /* @__PURE__ */ jsx29(
-      ToolCallBlock,
-      {
-        toolCall,
-        answerData: askAnswers?.[toolCall.id],
-        onAnswer,
-        answered: sessionStatus !== "waiting_for_input",
-        sessionId,
-        sessionStatus,
-        level,
-        turnBlocks
-      },
-      toolCall.id
-    )) }) : null
+    expanded ? /* @__PURE__ */ jsx29("div", { className: "mt-1 flex flex-col gap-1", children: toolCalls.map((toolCall) => {
+      const CustomToolCall = customization?.components?.ToolCall;
+      return CustomToolCall ? /* @__PURE__ */ jsx29(
+        CustomToolCall,
+        {
+          toolCall,
+          answerData: askAnswers?.[toolCall.id],
+          onAnswer,
+          answered: sessionStatus !== "waiting_for_input",
+          sessionId,
+          sessionStatus,
+          level,
+          turnBlocks,
+          customization
+        },
+        toolCall.id
+      ) : /* @__PURE__ */ jsx29(
+        ToolCallBlock,
+        {
+          toolCall,
+          answerData: askAnswers?.[toolCall.id],
+          onAnswer,
+          answered: sessionStatus !== "waiting_for_input",
+          sessionId,
+          sessionStatus,
+          level,
+          turnBlocks,
+          customization
+        },
+        toolCall.id
+      );
+    }) }) : null
   ] });
 }
 function AssistantMessageContent({
   message,
   isStreaming,
   sessionId,
-  reasoning
+  reasoning,
+  className
 }) {
   const fileParts = getFileParts(message.content);
   const imageParts = getImageParts(message.content);
@@ -6950,7 +7021,8 @@ function AssistantMessageContent({
         text,
         sessionId,
         messageId: message.entry_id,
-        reasoning
+        reasoning,
+        className
       }
     ) : null,
     !text && isStreaming && /* @__PURE__ */ jsx29("span", { className: "text-sm text-[hsl(var(--muted-foreground))]", children: "\u6B63\u5728\u751F\u6210..." }),
@@ -6961,7 +7033,8 @@ function AssistantText({
   text,
   sessionId,
   messageId,
-  reasoning
+  reasoning,
+  className
 }) {
   const sendMessage = useCallback11(
     async (content) => {
@@ -6973,7 +7046,7 @@ function AssistantText({
     () => ({ sessionId, messageId, sendMessage }),
     [sessionId, messageId, sendMessage]
   );
-  return /* @__PURE__ */ jsxs24("div", { className: "text-[15px] leading-8 text-[hsl(var(--foreground))]", children: [
+  return /* @__PURE__ */ jsxs24("div", { className: cn("text-[15px] leading-8 text-[hsl(var(--foreground))]", className), children: [
     /* @__PURE__ */ jsx29(CardContext.Provider, { value: cardCtx, children: /* @__PURE__ */ jsx29(
       MarkdownContent,
       {
@@ -7533,7 +7606,8 @@ function MessageList({
   messages: rawMessages,
   onAnswer,
   sessionStatus,
-  onConfirmPlan
+  onConfirmPlan,
+  customization
 }) {
   const messages = Array.isArray(rawMessages) ? rawMessages : [];
   const agentLoops = useChatStore((state) => state.agentLoops[sessionId]);
@@ -7697,35 +7771,43 @@ function MessageList({
   const handleSelectTurn = useCallback12((turnId) => {
     document.getElementById(turnId)?.scrollIntoView({ behavior: "smooth", block: "start" });
   }, []);
-  return /* @__PURE__ */ jsxs29("div", { ref: containerRef, className: "relative min-h-0 flex-1", children: [
-    turnNavItems.length > 1 ? /* @__PURE__ */ jsx34(
-      TurnNavRail,
-      {
-        items: turnNavItems,
-        activeTurnId: activeTurnId ?? lastTurnId,
-        onSelectTurn: handleSelectTurn
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs29(StickToBottom, { className: "h-full overflow-y-hidden", resize: "smooth", children: [
-      /* @__PURE__ */ jsx34(StickToBottom.Content, { className: "px-5 py-6", children: /* @__PURE__ */ jsx34(
-        MessageListContent,
-        {
-          askAnswers,
-          hasInterruptedTurn,
-          lastTurnId,
-          layoutSignature,
-          messages,
-          onAnswer,
-          onConfirmPlan,
-          renderBlocks,
-          sessionId,
-          sessionStatus,
-          stickyTurn
-        }
-      ) }),
-      /* @__PURE__ */ jsx34(ScrollToBottomButton, {})
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs29(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative min-h-0 flex-1 ${customization?.classNames?.messageListRoot ?? ""}`,
+      children: [
+        turnNavItems.length > 1 ? /* @__PURE__ */ jsx34(
+          TurnNavRail,
+          {
+            items: turnNavItems,
+            activeTurnId: activeTurnId ?? lastTurnId,
+            onSelectTurn: handleSelectTurn
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs29(StickToBottom, { className: "h-full overflow-y-hidden", resize: "smooth", children: [
+          /* @__PURE__ */ jsx34(StickToBottom.Content, { className: "px-5 py-6", children: /* @__PURE__ */ jsx34(
+            MessageListContent,
+            {
+              askAnswers,
+              hasInterruptedTurn,
+              lastTurnId,
+              layoutSignature,
+              messages,
+              onAnswer,
+              onConfirmPlan,
+              renderBlocks,
+              sessionId,
+              sessionStatus,
+              stickyTurn,
+              customization
+            }
+          ) }),
+          /* @__PURE__ */ jsx34(ScrollToBottomButton, {})
+        ] })
+      ]
+    }
+  );
 }
 function MessageListContent({
   askAnswers,
@@ -7738,7 +7820,8 @@ function MessageListContent({
   renderBlocks,
   sessionId,
   sessionStatus,
-  stickyTurn
+  stickyTurn,
+  customization
 }) {
   const { scrollToBottom } = useStickToBottomContext();
   const handleJumpToLatest = useCallback12(() => {
@@ -7748,7 +7831,7 @@ function MessageListContent({
     }
     scrollToBottom();
   }, [lastTurnId, scrollToBottom]);
-  return /* @__PURE__ */ jsx34("div", { className: "mx-auto max-w-3xl", children: /* @__PURE__ */ jsxs29("div", { className: "min-w-0 flex flex-col gap-8", children: [
+  return /* @__PURE__ */ jsx34("div", { className: `mx-auto max-w-3xl ${customization?.classNames?.messageListContent ?? ""}`, children: /* @__PURE__ */ jsxs29("div", { className: `min-w-0 flex flex-col gap-8 ${customization?.classNames?.messageListInner ?? ""}`, children: [
     stickyTurn ? /* @__PURE__ */ jsx34(
       StickyStatusBar,
       {
@@ -7759,13 +7842,37 @@ function MessageListContent({
         onJumpToLatest: handleJumpToLatest
       }
     ) : null,
-    renderBlocks.length === 0 ? /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center justify-center gap-3 py-24 text-[hsl(var(--muted-foreground))]", children: [
+    renderBlocks.length === 0 ? customization?.components?.EmptyState ? /* @__PURE__ */ jsx34(customization.components.EmptyState, {}) : /* @__PURE__ */ jsxs29("div", { className: `flex flex-col items-center justify-center gap-3 py-24 text-[hsl(var(--muted-foreground))] ${customization?.classNames?.emptyState ?? ""}`, children: [
       /* @__PURE__ */ jsx34(MessageSquare, { size: 40, strokeWidth: 1.5 }),
       /* @__PURE__ */ jsx34("span", { className: "text-base font-medium", children: "\u5F00\u59CB\u5BF9\u8BDD" }),
       /* @__PURE__ */ jsx34("span", { className: "text-sm opacity-60", children: "\u5728\u4E0B\u65B9\u8F93\u5165\u6D88\u606F\u5F00\u59CB\u804A\u5929" })
     ] }) : renderBlocks.map((block, blockIndex) => {
       if (block.type === "message") {
-        return /* @__PURE__ */ jsx34("div", { className: "msg-animate", children: isUserMessage(block.message) ? /* @__PURE__ */ jsx34(UserMessageBubble, { message: block.message }) : isErrorMessage(block.message) ? /* @__PURE__ */ jsx34(ErrorMessageBlock, { message: block.message }) : null }, block.key);
+        return /* @__PURE__ */ jsx34("div", { className: "msg-animate", children: isUserMessage(block.message) ? customization?.components?.UserMessage ? /* @__PURE__ */ jsx34(
+          customization.components.UserMessage,
+          {
+            message: block.message,
+            className: customization.classNames?.userMessage
+          }
+        ) : /* @__PURE__ */ jsx34(
+          UserMessageBubble,
+          {
+            message: block.message,
+            className: customization?.classNames?.userMessage
+          }
+        ) : isErrorMessage(block.message) ? customization?.components?.ErrorMessage ? /* @__PURE__ */ jsx34(
+          customization.components.ErrorMessage,
+          {
+            message: block.message,
+            className: customization.classNames?.errorMessage
+          }
+        ) : /* @__PURE__ */ jsx34(
+          ErrorMessageBlock,
+          {
+            message: block.message,
+            className: customization?.classNames?.errorMessage
+          }
+        ) : null }, block.key);
       }
       if (block.type === "assistant_turn") {
         const nextBlock = renderBlocks[blockIndex + 1];
@@ -7789,7 +7896,20 @@ function MessageListContent({
                   label: "\u52A9\u624B\u6D88\u606F",
                   details: block.key,
                   resetKey: getMessagesRenderSignature(block.messages),
-                  children: /* @__PURE__ */ jsx34(
+                  children: customization?.components?.AssistantTurn ? /* @__PURE__ */ jsx34(
+                    customization.components.AssistantTurn,
+                    {
+                      turnKey: block.key,
+                      sessionId,
+                      messages: block.messages,
+                      isStreaming: block.isStreaming,
+                      isLastTurn: block.anchorId === lastTurnId,
+                      askAnswers,
+                      onAnswer,
+                      sessionStatus,
+                      customization
+                    }
+                  ) : /* @__PURE__ */ jsx34(
                     AssistantTurnBlock,
                     {
                       turnKey: block.key,
@@ -7799,7 +7919,8 @@ function MessageListContent({
                       isLastTurn: block.anchorId === lastTurnId,
                       askAnswers,
                       onAnswer,
-                      sessionStatus
+                      sessionStatus,
+                      customization
                     }
                   )
                 }
@@ -7877,7 +7998,10 @@ function ChatView({
   onCommand,
   canShareSession = false,
   onResyncSkills,
-  isResyncingSkills = false
+  isResyncingSkills = false,
+  classNames,
+  components,
+  renderers
 }) {
   const {
     messages,
@@ -7903,8 +8027,10 @@ function ChatView({
     },
     [send]
   );
-  return /* @__PURE__ */ jsxs30("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [
-    isViewer && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-center gap-2 border-b border-[hsl(var(--border))] bg-[hsl(var(--card))] py-2 text-xs text-[hsl(var(--muted-foreground))]", children: [
+  const customization = { classNames, components, renderers };
+  const SkillStatus = components?.SkillStatusBar;
+  return /* @__PURE__ */ jsxs30("div", { className: `flex min-h-0 flex-1 flex-col overflow-hidden ${classNames?.root ?? ""}`, children: [
+    isViewer && /* @__PURE__ */ jsxs30("div", { className: `flex items-center justify-center gap-2 border-b border-[hsl(var(--border))] bg-[hsl(var(--card))] py-2 text-xs text-[hsl(var(--muted-foreground))] ${classNames?.viewerBanner ?? ""}`, children: [
       /* @__PURE__ */ jsx35(Eye, { size: 14 }),
       "\u4F60\u6B63\u5728\u67E5\u770B\u5206\u4EAB\u7684\u4F1A\u8BDD\uFF08\u53EA\u8BFB\uFF09"
     ] }),
@@ -7916,7 +8042,8 @@ function ChatView({
         messages,
         onAnswer: isViewer ? void 0 : (msg, toolCallId, answerData) => send(msg, mode, { tool_call_id: toolCallId, ...answerData }),
         sessionStatus,
-        onConfirmPlan: isViewer ? void 0 : onConfirmPlan
+        onConfirmPlan: isViewer ? void 0 : onConfirmPlan,
+        customization
       },
       sessionId
     ),
@@ -7932,6 +8059,11 @@ function ChatView({
         onBeforeSend,
         onCommand,
         canShareSession,
+        className: classNames?.chatInputRoot,
+        innerClassName: classNames?.chatInputInner,
+        SkillStatusBarComponent: SkillStatus,
+        skillStatusBarClassName: classNames?.skillStatusBarRoot,
+        skillStatusBarInnerClassName: classNames?.skillStatusBarInner,
         onResyncSkills,
         isResyncingSkills
       }
@@ -7989,4 +8121,4 @@ use-stick-to-bottom/dist/StickToBottom.js:
    *  Licensed under the MIT License. See License.txt in the project root for license information.
    *--------------------------------------------------------------------------------------------*)
 */
-//# sourceMappingURL=chunk-LIL4FIZP.js.map
+//# sourceMappingURL=chunk-QO6CO372.js.map