@inf-monkeys-tech/monkeys-design 2.0.118 → 2.0.120

package/dist/components/capabilities/index.mjs

@@ -11807,14 +11807,66 @@ var AGENT_CONVERSATION_MODEL_SCHEMA = z.toJSONSchema(
   AgentConversationModelSchema,
   { io: "input" }
 );
+function AgentConversationSkeleton({ label }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-label": label,
+      "aria-busy": "true",
+      "data-conversation-loading": "true",
+      className: "flex h-full min-h-0 w-full flex-col gap-6 overflow-hidden p-4 sm:p-6",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "mx-auto flex w-full max-w-5xl min-h-0 flex-1 flex-col gap-8",
+            children: [
+              /* @__PURE__ */ jsx(
+                BaseSkeleton,
+                {
+                  variant: "block",
+                  className: "h-12 w-1/3 shrink-0 self-end"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex w-2/3 flex-col gap-3", children: [
+                /* @__PURE__ */ jsx(BaseSkeleton, { variant: "circle", className: "size-8" }),
+                /* @__PURE__ */ jsx(BaseSkeleton, { className: "w-full" }),
+                /* @__PURE__ */ jsx(BaseSkeleton, { className: "w-4/5" }),
+                /* @__PURE__ */ jsx(BaseSkeleton, { className: "w-3/5" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-slot": "composer",
+            className: "mx-auto w-full max-w-5xl shrink-0",
+            children: /* @__PURE__ */ jsx(BaseSkeleton, { variant: "block", className: "h-32 w-full rounded-2xl" })
+          }
+        )
+      ]
+    }
+  );
+}
 var AgentConversationRuntimeContext = createContext(null);
 function AgentConversationCapabilityRenderer(context) {
   const Runtime = useContext(AgentConversationRuntimeContext);
   if (!context.access.allowed)
     return /* @__PURE__ */ jsx(CapabilityStatus, { kind: "forbidden", translate: context.translate });
-  if (context.loading && !context.readOnly)
-    return /* @__PURE__ */ jsx(CapabilityStatus, { kind: "loading", translate: context.translate });
   const parsed = AgentConversationModelSchema.safeParse(context.model);
+  if (context.loading && !parsed.success)
+    return /* @__PURE__ */ jsx(
+      AgentConversationSkeleton,
+      {
+        label: context.translate(
+          DESIGN_CAPABILITY_I18N_KEYS.status.loading.title
+        )
+      }
+    );
   if (!parsed.success || !Runtime)
     return /* @__PURE__ */ jsx(
       CapabilityStatus,
@@ -11826,19 +11878,27 @@ function AgentConversationCapabilityRenderer(context) {
     );
   const model = parsed.data;
   return /* @__PURE__ */ jsx(
-    Runtime,
+    "div",
     {
-      ...model,
-      sessionId: model.sessionId ?? "",
-      readOnly: context.readOnly === true,
-      onSessionStarted: context.readOnly ? void 0 : (sessionId) => context.emitIntent("sessionStarted", { sessionId }),
-      onContinue: context.readOnly ? void 0 : (messageId, runId) => context.emitIntent(
-        "continue",
-        { messageId, runId },
-        { awaitCompletion: true }
+      className: "contents",
+      "aria-busy": context.loading === true,
+      ...context.loading ? { inert: "" } : {},
+      children: /* @__PURE__ */ jsx(
+        Runtime,
+        {
+          ...model,
+          sessionId: model.sessionId ?? "",
+          readOnly: context.readOnly === true,
+          onSessionStarted: context.readOnly ? void 0 : (sessionId) => context.emitIntent("sessionStarted", { sessionId }),
+          onContinue: context.readOnly || context.loading ? void 0 : (messageId, runId) => context.emitIntent(
+            "continue",
+            { messageId, runId },
+            { awaitCompletion: true }
+          )
+        },
+        model.agentId
       )
-    },
-    model.agentId
+    }
   );
 }
 var VERSION = "1";