@helpai/elements 0.58.1 → 0.59.0

package/web-component.mjs

@@ -85,7 +85,6 @@ var STRINGS_EN = {
   loading: "Loading\u2026",
   thinking: "Thinking\u2026",
   thoughts: "Thoughts",
-  usedTool: "Used tool",
   toolResult: "Result",
   sources: "Sources",
   feedbackUp: "Good response",
@@ -156,12 +155,8 @@ var STRINGS_EN = {
   inputSkip: "Skip",
   confirmYes: "Yes",
   confirmNo: "No",
-  approvalRequired: "Approval required",
   approve: "Approve",
   reject: "Reject",
-  approved: "Approved",
-  rejected: "Rejected",
-  approvalReason: "Add a reason (optional)",
   approvalPrompt: "{tool} requires your approval to execute.",
   approvalBody: "Review the tool input above and decide whether to allow this action.",
   approvalYourResponse: "Your response: {decision}",
@@ -233,7 +228,6 @@ var STRINGS_FR = {
   loading: "Chargement\u2026",
   thinking: "R\xE9flexion\u2026",
   thoughts: "R\xE9flexions",
-  usedTool: "Outil utilis\xE9",
   toolResult: "R\xE9sultat",
   sources: "Sources",
   feedbackUp: "Bonne r\xE9ponse",
@@ -304,12 +298,8 @@ var STRINGS_FR = {
   inputSkip: "Ignorer",
   confirmYes: "Oui",
   confirmNo: "Non",
-  approvalRequired: "Approbation requise",
   approve: "Approuver",
   reject: "Refuser",
-  approved: "Approuv\xE9",
-  rejected: "Refus\xE9",
-  approvalReason: "Ajouter une raison (facultatif)",
   approvalPrompt: "{tool} n\xE9cessite votre approbation pour s'ex\xE9cuter.",
   approvalBody: "V\xE9rifiez les param\xE8tres ci-dessus et d\xE9cidez d'autoriser ou non cette action.",
   approvalYourResponse: "Votre r\xE9ponse : {decision}",
@@ -381,7 +371,6 @@ var STRINGS_AR = {
   loading: "\u062C\u0627\u0631\u064D \u0627\u0644\u062A\u062D\u0645\u064A\u0644\u2026",
   thinking: "\u064A\u0641\u0643\u0651\u0631\u2026",
   thoughts: "\u0627\u0644\u0623\u0641\u0643\u0627\u0631",
-  usedTool: "\u0623\u062F\u0627\u0629 \u0645\u064F\u0633\u062A\u062E\u062F\u064E\u0645\u0629",
   toolResult: "\u0627\u0644\u0646\u062A\u064A\u062C\u0629",
   sources: "\u0627\u0644\u0645\u0635\u0627\u062F\u0631",
   feedbackUp: "\u0631\u062F \u062C\u064A\u062F",
@@ -452,12 +441,8 @@ var STRINGS_AR = {
   inputSkip: "\u062A\u062E\u0637\u064D\u0651",
   confirmYes: "\u0646\u0639\u0645",
   confirmNo: "\u0644\u0627",
-  approvalRequired: "\u0645\u0637\u0644\u0648\u0628 \u0645\u0648\u0627\u0641\u0642\u0629",
   approve: "\u0645\u0648\u0627\u0641\u0642\u0629",
   reject: "\u0631\u0641\u0636",
-  approved: "\u062A\u0645\u062A \u0627\u0644\u0645\u0648\u0627\u0641\u0642\u0629",
-  rejected: "\u0645\u0631\u0641\u0648\u0636",
-  approvalReason: "\u0623\u0636\u0641 \u0633\u0628\u0628\u064B\u0627 (\u0627\u062E\u062A\u064A\u0627\u0631\u064A)",
   approvalPrompt: "\u062A\u062A\u0637\u0644\u0628 {tool} \u0645\u0648\u0627\u0641\u0642\u062A\u0643 \u0644\u0644\u062A\u0646\u0641\u064A\u0630.",
   approvalBody: "\u0631\u0627\u062C\u0639 \u0645\u064F\u0639\u0637\u064A\u0627\u062A \u0627\u0644\u0623\u062F\u0627\u0629 \u0623\u0639\u0644\u0627\u0647 \u0648\u0642\u0631\u0651\u0631 \u0627\u0644\u0633\u0645\u0627\u062D \u0628\u0647\u0630\u0627 \u0627\u0644\u0625\u062C\u0631\u0627\u0621 \u0623\u0648 \u0631\u0641\u0636\u0647.",
   approvalYourResponse: "\u0631\u062F\u0651\u0643: {decision}",
@@ -529,7 +514,6 @@ var STRINGS_ES = {
   loading: "Cargando\u2026",
   thinking: "Pensando\u2026",
   thoughts: "Razonamiento",
-  usedTool: "Herramienta usada",
   toolResult: "Resultado",
   sources: "Fuentes",
   feedbackUp: "Buena respuesta",
@@ -600,12 +584,8 @@ var STRINGS_ES = {
   inputSkip: "Omitir",
   confirmYes: "S\xED",
   confirmNo: "No",
-  approvalRequired: "Aprobaci\xF3n requerida",
   approve: "Aprobar",
   reject: "Rechazar",
-  approved: "Aprobado",
-  rejected: "Rechazado",
-  approvalReason: "A\xF1ade un motivo (opcional)",
   approvalPrompt: "{tool} requiere tu aprobaci\xF3n para ejecutarse.",
   approvalBody: "Revisa los par\xE1metros de arriba y decide si permites esta acci\xF3n.",
   approvalYourResponse: "Tu respuesta: {decision}",
@@ -677,7 +657,6 @@ var STRINGS_HE = {
   loading: "\u05D8\u05D5\u05E2\u05DF\u2026",
   thinking: "\u05D7\u05D5\u05E9\u05D1\u2026",
   thoughts: "\u05DE\u05D7\u05E9\u05D1\u05D5\u05EA",
-  usedTool: "\u05DB\u05DC\u05D9 \u05D1\u05E9\u05D9\u05DE\u05D5\u05E9",
   toolResult: "\u05EA\u05D5\u05E6\u05D0\u05D4",
   sources: "\u05DE\u05E7\u05D5\u05E8\u05D5\u05EA",
   feedbackUp: "\u05EA\u05E9\u05D5\u05D1\u05D4 \u05D8\u05D5\u05D1\u05D4",
@@ -748,12 +727,8 @@ var STRINGS_HE = {
   inputSkip: "\u05D3\u05D9\u05DC\u05D5\u05D2",
   confirmYes: "\u05DB\u05DF",
   confirmNo: "\u05DC\u05D0",
-  approvalRequired: "\u05E0\u05D3\u05E8\u05E9 \u05D0\u05D9\u05E9\u05D5\u05E8",
   approve: "\u05D0\u05D9\u05E9\u05D5\u05E8",
   reject: "\u05D3\u05D7\u05D9\u05D9\u05D4",
-  approved: "\u05D0\u05D5\u05E9\u05E8",
-  rejected: "\u05E0\u05D3\u05D7\u05D4",
-  approvalReason: "\u05D4\u05D5\u05E1\u05E3 \u05E1\u05D9\u05D1\u05D4 (\u05D0\u05D5\u05E4\u05E6\u05D9\u05D5\u05E0\u05DC\u05D9)",
   approvalPrompt: "\u05D4\u05DB\u05DC\u05D9 {tool} \u05D3\u05D5\u05E8\u05E9 \u05D0\u05EA \u05D0\u05D9\u05E9\u05D5\u05E8\u05DA \u05DB\u05D3\u05D9 \u05DC\u05E4\u05E2\u05D5\u05DC.",
   approvalBody: "\u05D1\u05D3\u05D5\u05E7 \u05D0\u05EA \u05E4\u05E8\u05DE\u05D8\u05E8\u05D9 \u05D4\u05DB\u05DC\u05D9 \u05E9\u05DC\u05DE\u05E2\u05DC\u05D4 \u05D5\u05D4\u05D7\u05DC\u05D8 \u05D0\u05DD \u05DC\u05D0\u05E9\u05E8 \u05E4\u05E2\u05D5\u05DC\u05D4 \u05D6\u05D5.",
   approvalYourResponse: "\u05D4\u05EA\u05D2\u05D5\u05D1\u05D4 \u05E9\u05DC\u05DA: {decision}",
@@ -1959,7 +1934,7 @@ function createAuth(opts) {
 }
 
 // src/core/version.ts
-var ELEMENTS_VERSION = true ? "0.58.1" : "0.0.0-dev";
+var ELEMENTS_VERSION = true ? "0.59.0" : "0.0.0-dev";
 var ELEMENTS_VERSION_PARAM = "_ev";
 
 // src/stream/types.ts
@@ -3192,6 +3167,8 @@ var StreamReducer = class {
         return;
       case "data-conversation-rebind":
         return;
+      case "data-suggestions":
+        return;
       default: {
         const _exhaustive = chunk;
         void _exhaustive;
@@ -5612,6 +5589,12 @@ function toolDecisionState(state, approval) {
   const responded = state === "approval-responded" || approval?.approved !== void 0;
   return { terminal, responded, decided: terminal || responded };
 }
+function StatusPill({ status, icon, label }) {
+  return /* @__PURE__ */ jsxs12("span", { class: `${p14}-toolui-badge ${p14}-toolui-status`, "data-status": status, children: [
+    /* @__PURE__ */ jsx15("span", { class: `${p14}-toolui-status-icon`, children: icon }),
+    label
+  ] });
+}
 function statusOf(state, approval) {
   if (state === "output-error") return "error";
   if (state === "output-denied" || approval?.approved === false) return "denied";
@@ -5651,10 +5634,7 @@ function ToolStatus({
 }) {
   const base = statusOf(state, approval);
   const status = superseded && (base === "awaiting" || base === "running") ? "superseded" : base;
-  return /* @__PURE__ */ jsxs12("span", { class: `${p14}-toolui-badge ${p14}-toolui-status`, "data-status": status, children: [
-    /* @__PURE__ */ jsx15("span", { class: `${p14}-toolui-status-icon`, children: /* @__PURE__ */ jsx15(StatusIcon, { status }) }),
-    statusLabel(status, strings)
-  ] });
+  return /* @__PURE__ */ jsx15(StatusPill, { status, icon: /* @__PURE__ */ jsx15(StatusIcon, { status }), label: statusLabel(status, strings) });
 }
 function ToolHeaderRow({
   name,
@@ -5879,18 +5859,18 @@ function ToolAskQuestions({ part, strings, active, superseded = false, onDecisio
   const req = useComputed4(() => parseAskUserQuestions(part.inputSig.value)).value;
   const { terminal, decided } = toolDecisionState(state, approval);
   const answered = decided && approval?.approved === true;
-  const editable = !decided && !superseded;
-  const skipped = !editable && !answered;
+  const awaiting = !decided && !superseded;
+  const skipped = !awaiting && !answered;
   const canEdit = answered && active && !terminal;
   const questions = req.questions;
   const [manualOpen, setManualOpen] = useState7(null);
-  const openDefault = editable || answered;
+  const openDefault = awaiting || answered;
   const isOpen = manualOpen ?? openDefault;
   const [showOptions, setShowOptions] = useState7(false);
   const QIcon = questions.length > 1 ? ChatIcon : HelpIcon;
-  const identity = editable ? strings.inputRequired : strings.inputBadge;
+  const identity = awaiting ? strings.inputRequired : strings.inputBadge;
   const body = (() => {
-    if (editable) {
+    if (awaiting) {
       return /* @__PURE__ */ jsx17(EditableForm, { req, strings, resolve: (reason, ok) => onDecision(part.toolCallId, ok, reason) });
     }
     if (showOptions) {
@@ -5927,7 +5907,7 @@ function ToolAskQuestions({ part, strings, active, superseded = false, onDecisio
         const next = e.currentTarget.open;
         if (next !== isOpen) setManualOpen(next);
       },
-      "data-testid": editable ? TID.toolAskQuestions : TID.toolDecision,
+      "data-testid": awaiting ? TID.toolAskQuestions : TID.toolDecision,
       children: [
         /* @__PURE__ */ jsxs14("summary", { class: `${p16}-toolui-head`, children: [
           /* @__PURE__ */ jsxs14("span", { class: `${p16}-toolui-q-pill`, children: [
@@ -5935,13 +5915,16 @@ function ToolAskQuestions({ part, strings, active, superseded = false, onDecisio
             identity
           ] }),
           /* @__PURE__ */ jsxs14("span", { class: `${p16}-toolui-head-end`, children: [
-            editable ? null : (
-              // Same neutral pill + coloured-icon status as the tool-call card
-              // (green check = answered, muted ✕ = skipped) — only the label differs.
-              /* @__PURE__ */ jsxs14("span", { class: `${p16}-toolui-badge ${p16}-toolui-status`, "data-status": skipped ? "superseded" : "completed", children: [
-                /* @__PURE__ */ jsx17("span", { class: `${p16}-toolui-status-icon`, children: skipped ? /* @__PURE__ */ jsx17(XCircleIcon, {}) : /* @__PURE__ */ jsx17(CheckCircleIcon, {}) }),
-                skipped ? strings.inputSkipped : strings.inputAnswered
-              ] })
+            awaiting ? null : (
+              // Reuse the tool-call status-pill shell — green check = answered, muted ✕ = skipped.
+              /* @__PURE__ */ jsx17(
+                StatusPill,
+                {
+                  status: skipped ? "superseded" : "completed",
+                  icon: skipped ? /* @__PURE__ */ jsx17(XCircleIcon, {}) : /* @__PURE__ */ jsx17(CheckCircleIcon, {}),
+                  label: skipped ? strings.inputSkipped : strings.inputAnswered
+                }
+              )
             ),
             /* @__PURE__ */ jsx17("span", { class: `${p16}-toolui-chevron`, children: /* @__PURE__ */ jsx17(ChevronDownIcon, {}) })
           ] })
@@ -5949,7 +5932,7 @@ function ToolAskQuestions({ part, strings, active, superseded = false, onDecisio
         /* @__PURE__ */ jsxs14("div", { class: `${p16}-toolui-collapse-body`, children: [
           req.intro ? /* @__PURE__ */ jsx17("div", { class: `${p16}-toolui-desc`, children: req.intro }) : null,
           body,
-          editable ? null : /* @__PURE__ */ jsxs14(
+          awaiting ? null : /* @__PURE__ */ jsxs14(
             "button",
             {
               type: "button",
@@ -6816,6 +6799,22 @@ function ConversationList({
 // src/ui/suggestions.tsx
 import { jsx as jsx22 } from "preact/jsx-runtime";
 var p19 = BRAND.cssPrefix;
+function parseSuggestions(data) {
+  const raw = data?.suggestions;
+  if (!Array.isArray(raw)) return [];
+  const out = [];
+  for (const item of raw) {
+    if (!item || typeof item !== "object") continue;
+    const { id, label, text } = item;
+    if (typeof label !== "string" || !label) continue;
+    out.push({
+      id: typeof id === "string" && id ? id : `s${out.length}`,
+      label,
+      text: typeof text === "string" && text ? text : label
+    });
+  }
+  return out;
+}
 function Suggestions({ suggestions, onPick }) {
   if (suggestions.length === 0) return null;
   return /* @__PURE__ */ jsx22("div", { class: `${p19}-suggestions`, role: "group", "aria-label": "Suggested replies", children: suggestions.map((s, i) => /* @__PURE__ */ jsx22(
@@ -8385,6 +8384,18 @@ function App({ options, hostElement, bus }) {
   useEffect16(() => {
     if (effectiveLocale !== activeLocale) setActiveLocale(effectiveLocale);
   }, [effectiveLocale, activeLocale]);
+  const pendingSuggestionsRef = useRef9(null);
+  const captureSuggestions = useCallback6((chunk) => {
+    if (chunk.type !== "data-suggestions") return false;
+    pendingSuggestionsRef.current = parseSuggestions(chunk.data);
+    return true;
+  }, []);
+  const flushSuggestions = useCallback6(() => {
+    if (pendingSuggestionsRef.current) {
+      setSuggestions(pendingSuggestionsRef.current);
+      pendingSuggestionsRef.current = null;
+    }
+  }, []);
   const adoptConversationRebind = useCallback6(
     (chunk) => {
       if (chunk.type !== "data-conversation-rebind") return false;
@@ -8404,9 +8415,10 @@ function App({ options, hostElement, bus }) {
   const runResume = useCallback6(
     async (handle) => {
       let bubble = null;
+      pendingSuggestionsRef.current = null;
       try {
         for await (const evt of handle.iter) {
-          if (adoptConversationRebind(evt.chunk)) continue;
+          if (adoptConversationRebind(evt.chunk) || captureSuggestions(evt.chunk)) continue;
           if (!bubble) {
             bubble = makeAssistantMessage();
             resumeBubbleRef.current = bubble;
@@ -8432,6 +8444,7 @@ function App({ options, hostElement, bus }) {
             bubble.status = "complete";
             feedback.play("messageReceived");
             emitMessage(bus, options, "assistant", assistantText(bubble));
+            flushSuggestions();
           }
         }
       } catch (err) {
@@ -8570,12 +8583,13 @@ function App({ options, hostElement, bus }) {
         userPrefs: persistence.loadUserPrefs()
       });
       setStreaming(true);
+      pendingSuggestionsRef.current = null;
       const handle = transport.sendMessage(body);
       setActiveCancel(() => handle.cancel);
       setActiveDetach(() => handle.detach);
       try {
         for await (const evt of handle.iter) {
-          if (adoptConversationRebind(evt.chunk)) continue;
+          if (adoptConversationRebind(evt.chunk) || captureSuggestions(evt.chunk)) continue;
           reducer.apply(evt.chunk);
           if (evt.chunk.type === "finish" && evt.chunk.canContinue === false) {
             setCanSend(false);
@@ -8594,6 +8608,7 @@ function App({ options, hostElement, bus }) {
           assistantMsg.status = "complete";
           feedback.play("messageReceived");
           emitMessage(bus, options, "assistant", assistantText(assistantMsg));
+          flushSuggestions();
         }
       } catch (error) {
         if (isAbortError(error)) {