@wallavi/widget 1.6.1 → 1.6.3

package/dist/index.d.mts

@@ -21,13 +21,25 @@ type PickerPart = {
     }>;
     selectedValue?: string;
 };
+type PlanStepState = {
+    index: number;
+    description: string;
+    status: "pending" | "executing" | "success" | "failed";
+    error?: string;
+};
+type PlanPart = {
+    type: "plan";
+    planId: string;
+    goal: string;
+    steps: PlanStepState[];
+};
 type MessagePart = {
     type: "text";
     text: string;
 } | {
     type: "reasoning";
     text: string;
-} | ToolPart | PickerPart;
+} | ToolPart | PickerPart | PlanPart;
 type Message = {
     id: string;
     role: "user" | "assistant";

package/dist/index.d.ts

@@ -21,13 +21,25 @@ type PickerPart = {
     }>;
     selectedValue?: string;
 };
+type PlanStepState = {
+    index: number;
+    description: string;
+    status: "pending" | "executing" | "success" | "failed";
+    error?: string;
+};
+type PlanPart = {
+    type: "plan";
+    planId: string;
+    goal: string;
+    steps: PlanStepState[];
+};
 type MessagePart = {
     type: "text";
     text: string;
 } | {
     type: "reasoning";
     text: string;
-} | ToolPart | PickerPart;
+} | ToolPart | PickerPart | PlanPart;
 type Message = {
     id: string;
     role: "user" | "assistant";

package/dist/index.js

@@ -205,6 +205,30 @@ function useChat({
           });
           break;
         }
+        case "plan-created": {
+          msg.parts.push({
+            type: "plan",
+            planId: proto.planId,
+            goal: proto.goal,
+            steps: proto.steps.map((s) => ({ ...s, status: "pending" }))
+          });
+          break;
+        }
+        case "plan-step-update": {
+          const pIdx = msg.parts.findIndex(
+            (p) => p.type === "plan" && p.planId === proto.planId
+          );
+          if (pIdx !== -1) {
+            const prev2 = msg.parts[pIdx];
+            msg.parts[pIdx] = {
+              ...prev2,
+              steps: prev2.steps.map(
+                (s) => s.index === proto.stepIndex ? { ...s, status: proto.status, ...proto.error ? { error: proto.error } : {} } : s
+              )
+            };
+          }
+          break;
+        }
       }
       const copy = [...prev];
       copy[idx] = msg;
@@ -717,6 +741,60 @@ function SentAttachments({ attachments, contrastColor }) {
     )) })
   ] });
 }
+function PlanStepIcon({ status }) {
+  if (status === "executing") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 animate-spin text-primary" });
+  if (status === "success") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3 w-3 text-emerald-500" });
+  if (status === "failed") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-3 w-3 text-destructive" });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full border-2 border-muted-foreground/30" });
+}
+function PlanCard({ part }) {
+  const successCount = part.steps.filter((s) => s.status === "success").length;
+  const hasExecuting = part.steps.some((s) => s.status === "executing");
+  const allDone = successCount === part.steps.length && part.steps.length > 0;
+  const anyFailed = part.steps.some((s) => s.status === "failed");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border bg-background overflow-hidden text-xs w-full shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted/50 border-b", children: [
+      hasExecuting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-primary/80" }) : allDone ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-3.5 w-3.5 shrink-0 text-emerald-500" }) : anyFailed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-3.5 w-3.5 shrink-0 text-destructive" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Zap, { className: "h-3.5 w-3.5 shrink-0 text-primary/70" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground/80 truncate flex-1 leading-snug", children: part.goal }),
+      part.steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: [
+        successCount,
+        "/",
+        part.steps.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border/40", children: part.steps.map((step) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-start gap-2.5 px-3 py-2 transition-colors duration-200",
+          step.status === "executing" && "bg-primary/5"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(PlanStepIcon, { status: step.status }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                "leading-relaxed",
+                step.status === "pending" && "text-muted-foreground",
+                step.status === "executing" && "text-foreground font-medium",
+                step.status === "success" && "text-foreground/60 line-through decoration-foreground/20",
+                step.status === "failed" && "text-destructive"
+              ),
+              children: [
+                step.index + 1,
+                ". ",
+                step.description,
+                step.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-destructive/70 text-[10px] mt-0.5 no-underline", children: step.error })
+              ]
+            }
+          )
+        ]
+      },
+      step.index
+    )) })
+  ] });
+}
 function ThinkingDots() {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
@@ -905,6 +983,7 @@ function MessageBubble({
   const reasoningPart = message.parts.find((p) => p.type === "reasoning");
   const toolParts = message.parts.filter((p) => p.type === "tool");
   const pickerParts = message.parts.filter((p) => p.type === "picker");
+  const planParts = message.parts.filter((p) => p.type === "plan");
   const contrastColor = getContrastColor(userColor);
   if (isUser) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -925,6 +1004,7 @@ function MessageBubble({
     /* @__PURE__ */ jsxRuntime.jsx(Avatar2, { style: { width: 28, height: 28, marginTop: 2, border: "1px solid rgba(0,0,0,0.08)" }, children: profilePicture ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage2, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback2, { style: { fontSize: 10, fontWeight: 600, backgroundColor: "var(--primary, #19191c)", color: "var(--primary-foreground, #fff)" }, children: agentName.slice(0, 2).toUpperCase() }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 min-w-0 max-w-[82%]", children: [
       showThinking && reasoningPart && /* @__PURE__ */ jsxRuntime.jsx(ReasoningBlock, { text: reasoningPart.text }),
+      planParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(PlanCard, { part: p }, p.planId)),
       visibleToolParts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToolCallBadge, { part: t }, t.toolCallId)),
       pickerParts.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
         PickerSelector,
@@ -1253,6 +1333,22 @@ function ChatWidget({
     chat.reset();
     onReset?.();
   };
+  const isDark = theme === "dark";
+  const cssVars = {
+    colorScheme: theme,
+    ["--background"]: isDark ? "240 10% 3.9%" : "0 0% 100%",
+    ["--foreground"]: isDark ? "0 0% 98%" : "240 10% 3.9%",
+    ["--muted"]: isDark ? "240 3.7% 15.9%" : "240 4.8% 95.9%",
+    ["--muted-foreground"]: isDark ? "240 5% 64.9%" : "240 3.8% 46.1%",
+    ["--accent"]: isDark ? "240 3.7% 15.9%" : "240 4.8% 95.9%",
+    ["--accent-foreground"]: isDark ? "0 0% 98%" : "240 5.9% 10%",
+    ["--border"]: isDark ? "240 3.7% 15.9%" : "240 5.9% 90%",
+    ["--input"]: isDark ? "240 3.7% 15.9%" : "240 5.9% 90%",
+    ["--primary"]: isDark ? "0 0% 98%" : "240 5.9% 10%",
+    ["--primary-foreground"]: isDark ? "240 5.9% 10%" : "0 0% 98%",
+    ["--ring"]: isDark ? "240 4.9% 83.9%" : "240 10% 3.9%",
+    ["--radius"]: "0.5rem"
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1261,7 +1357,7 @@ function ChatWidget({
         isDragOver && "ring-2 ring-inset ring-primary/60",
         className
       ),
-      style: { colorScheme: theme },
+      style: cssVars,
       onDragOver: handleDragOver,
       onDragEnter: handleDragOver,
       onDragLeave: handleDragLeave,

package/dist/index.mjs

@@ -179,6 +179,30 @@ function useChat({
           });
           break;
         }
+        case "plan-created": {
+          msg.parts.push({
+            type: "plan",
+            planId: proto.planId,
+            goal: proto.goal,
+            steps: proto.steps.map((s) => ({ ...s, status: "pending" }))
+          });
+          break;
+        }
+        case "plan-step-update": {
+          const pIdx = msg.parts.findIndex(
+            (p) => p.type === "plan" && p.planId === proto.planId
+          );
+          if (pIdx !== -1) {
+            const prev2 = msg.parts[pIdx];
+            msg.parts[pIdx] = {
+              ...prev2,
+              steps: prev2.steps.map(
+                (s) => s.index === proto.stepIndex ? { ...s, status: proto.status, ...proto.error ? { error: proto.error } : {} } : s
+              )
+            };
+          }
+          break;
+        }
       }
       const copy = [...prev];
       copy[idx] = msg;
@@ -691,6 +715,60 @@ function SentAttachments({ attachments, contrastColor }) {
     )) })
   ] });
 }
+function PlanStepIcon({ status }) {
+  if (status === "executing") return /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin text-primary" });
+  if (status === "success") return /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3 w-3 text-emerald-500" });
+  if (status === "failed") return /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 text-destructive" });
+  return /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full border-2 border-muted-foreground/30" });
+}
+function PlanCard({ part }) {
+  const successCount = part.steps.filter((s) => s.status === "success").length;
+  const hasExecuting = part.steps.some((s) => s.status === "executing");
+  const allDone = successCount === part.steps.length && part.steps.length > 0;
+  const anyFailed = part.steps.some((s) => s.status === "failed");
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-background overflow-hidden text-xs w-full shadow-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted/50 border-b", children: [
+      hasExecuting ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-primary/80" }) : allDone ? /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3.5 w-3.5 shrink-0 text-emerald-500" }) : anyFailed ? /* @__PURE__ */ jsx(AlertCircle, { className: "h-3.5 w-3.5 shrink-0 text-destructive" }) : /* @__PURE__ */ jsx(Zap, { className: "h-3.5 w-3.5 shrink-0 text-primary/70" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground/80 truncate flex-1 leading-snug", children: part.goal }),
+      part.steps.length > 0 && /* @__PURE__ */ jsxs("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: [
+        successCount,
+        "/",
+        part.steps.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/40", children: part.steps.map((step) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-start gap-2.5 px-3 py-2 transition-colors duration-200",
+          step.status === "executing" && "bg-primary/5"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsx(PlanStepIcon, { status: step.status }) }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "leading-relaxed",
+                step.status === "pending" && "text-muted-foreground",
+                step.status === "executing" && "text-foreground font-medium",
+                step.status === "success" && "text-foreground/60 line-through decoration-foreground/20",
+                step.status === "failed" && "text-destructive"
+              ),
+              children: [
+                step.index + 1,
+                ". ",
+                step.description,
+                step.error && /* @__PURE__ */ jsx("span", { className: "block text-destructive/70 text-[10px] mt-0.5 no-underline", children: step.error })
+              ]
+            }
+          )
+        ]
+      },
+      step.index
+    )) })
+  ] });
+}
 function ThinkingDots() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: `
@@ -879,6 +957,7 @@ function MessageBubble({
   const reasoningPart = message.parts.find((p) => p.type === "reasoning");
   const toolParts = message.parts.filter((p) => p.type === "tool");
   const pickerParts = message.parts.filter((p) => p.type === "picker");
+  const planParts = message.parts.filter((p) => p.type === "plan");
   const contrastColor = getContrastColor(userColor);
   if (isUser) {
     return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
@@ -899,6 +978,7 @@ function MessageBubble({
     /* @__PURE__ */ jsx(Avatar2, { style: { width: 28, height: 28, marginTop: 2, border: "1px solid rgba(0,0,0,0.08)" }, children: profilePicture ? /* @__PURE__ */ jsx(AvatarImage2, { src: profilePicture, alt: agentName }) : /* @__PURE__ */ jsx(AvatarFallback2, { style: { fontSize: 10, fontWeight: 600, backgroundColor: "var(--primary, #19191c)", color: "var(--primary-foreground, #fff)" }, children: agentName.slice(0, 2).toUpperCase() }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 min-w-0 max-w-[82%]", children: [
       showThinking && reasoningPart && /* @__PURE__ */ jsx(ReasoningBlock, { text: reasoningPart.text }),
+      planParts.map((p) => /* @__PURE__ */ jsx(PlanCard, { part: p }, p.planId)),
       visibleToolParts.map((t) => /* @__PURE__ */ jsx(ToolCallBadge, { part: t }, t.toolCallId)),
       pickerParts.map((p) => /* @__PURE__ */ jsx(
         PickerSelector,
@@ -1227,6 +1307,22 @@ function ChatWidget({
     chat.reset();
     onReset?.();
   };
+  const isDark = theme === "dark";
+  const cssVars = {
+    colorScheme: theme,
+    ["--background"]: isDark ? "240 10% 3.9%" : "0 0% 100%",
+    ["--foreground"]: isDark ? "0 0% 98%" : "240 10% 3.9%",
+    ["--muted"]: isDark ? "240 3.7% 15.9%" : "240 4.8% 95.9%",
+    ["--muted-foreground"]: isDark ? "240 5% 64.9%" : "240 3.8% 46.1%",
+    ["--accent"]: isDark ? "240 3.7% 15.9%" : "240 4.8% 95.9%",
+    ["--accent-foreground"]: isDark ? "0 0% 98%" : "240 5.9% 10%",
+    ["--border"]: isDark ? "240 3.7% 15.9%" : "240 5.9% 90%",
+    ["--input"]: isDark ? "240 3.7% 15.9%" : "240 5.9% 90%",
+    ["--primary"]: isDark ? "0 0% 98%" : "240 5.9% 10%",
+    ["--primary-foreground"]: isDark ? "240 5.9% 10%" : "0 0% 98%",
+    ["--ring"]: isDark ? "240 4.9% 83.9%" : "240 10% 3.9%",
+    ["--radius"]: "0.5rem"
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1235,7 +1331,7 @@ function ChatWidget({
         isDragOver && "ring-2 ring-inset ring-primary/60",
         className
       ),
-      style: { colorScheme: theme },
+      style: cssVars,
       onDragOver: handleDragOver,
       onDragEnter: handleDragOver,
       onDragLeave: handleDragLeave,

package/package.json

@@ -33,7 +33,7 @@
   },
   "private": false,
   "types": "./dist/index.d.ts",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit"