@ykurilov/agent-chat-react 0.67.0 → 0.69.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @ykurilov/agent-chat-react
 
+## 0.69.0
+
+### Minor Changes
+
+- e6c03dc: Значки шагов и заголовки раздумий (106): в простом виде — ряд значков у «Сделано N шагов» и список «значок + фраза» (`StepIcon`, `icon` в `stepPhrases`, `guessStepIcon`); `thoughtTitles` у службы чата — заголовок раздумья от провайдера или пересказ дешёвой моделью в фоне, хранится в части раздумья, в запрос основной модели не идёт, расход `thought_title`; договор скина 28 (`WorkStepsView.live.icon`, `done.items`, `icons`, `moreIcons`, `Reasoning.title`); фраза навыка с именем.
+
+## 0.68.0
+
+No changes in this release.
+
 ## 0.67.0
 
 No changes in this release.

package/README.md

@@ -66,6 +66,10 @@ import { AgentChat, ChatLabelsProvider, russianLabels } from "@ykurilov/agent-ch
   поправку. Скину — `ChatSkin.steering`, `Composer.canSteer` и `UserMessage.pending` (договор v21, [docs/skin-v21.md](../../docs/skin-v21.md)).
 - `liveDemos` — живые демонстрации: блок ` ```html-demo ` в ответе запускается в изолированной рамке во всю ширину ответа (на сервере —
   `agent.liveDemos: true`). Скину — `AgentText.renderDemo` и `ChatSkin.demoColors` (договор v22, [docs/live-demos.md](../../docs/live-demos.md)).
+- Значки шагов и заголовки раздумий (с 0.69, договор скина v28, [docs/skin-v28.md](../../docs/skin-v28.md)): в простом виде
+  ряд значков у «Сделано N шагов» и список «значок + фраза»; значок своему инструменту — `icon` рядом с фразами
+  `stepPhrases` (`StepIcon`), без него — `guessStepIcon` по имени. Заголовки раздумий приходят с сервера
+  (`thoughtTitles`) и показываются сами — в простом и подробном виде ([docs/work-view.md](../../docs/work-view.md)).
 - Английский интерфейс: `<ChatLabelsProvider labels={englishLabels}>` — полный словарь (см. docs/getting-started.md, «Надписи»).
 - `onTurnFinished({ chatId, messageId, status })` — ход закончен на экране: один раз на ход, когда ответ получил итог, включая остановку
   и ошибку. Ответ, закрытый ради поправки на лету, получает своё событие перед ответом на поправку. Открытие чата с готовой историей события не даёт. На сервере то же — `onTurnFinished` у `createChatHandler`.

package/dist/{chunk-JLGBVDAR.js → chunk-Z7X5D4OF.js}

@@ -296,6 +296,8 @@ var russianWorkView = {
   stepUnfinishedUnknown: "\u0428\u0430\u0433 \u043D\u0435 \u0437\u0430\u043A\u043E\u043D\u0447\u0435\u043D",
   stepRepeated: (phrase, count) => `${phrase} \xD7${count}`,
   thinking: "\u0414\u0443\u043C\u0430\u044E",
+  thought: (durationMs) => durationMs === null ? "\u041F\u043E\u0434\u0443\u043C\u0430\u043B" : `\u0414\u0443\u043C\u0430\u043B ${Math.max(1, Math.round(durationMs / 1e3))} \u0441\u0435\u043A`,
+  moreSteps: (count) => `+${count}`,
   live: withEllipsis,
   stepsDone: (count) => `${russianPlural.select(count) === "one" ? "\u0421\u0434\u0435\u043B\u0430\u043D" : "\u0421\u0434\u0435\u043B\u0430\u043D\u043E"} ${russianCount(count, { one: "\u0448\u0430\u0433", few: "\u0448\u0430\u0433\u0430", many: "\u0448\u0430\u0433\u043E\u0432" })}`,
   helperRunning: (name) => `\u041F\u043E\u043C\u043E\u0449\u043D\u0438\u043A \xAB${name}\xBB \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442`,
@@ -310,6 +312,8 @@ var englishWorkViewLabels = {
   stepUnfinishedUnknown: "A step wasn\u2019t finished",
   stepRepeated: (phrase, count) => `${phrase} \xD7${count}`,
   thinking: "Thinking",
+  thought: (durationMs) => durationMs === null ? "Thought" : `Thought for ${Math.max(1, Math.round(durationMs / 1e3))} s`,
+  moreSteps: (count) => `+${count}`,
   live: withEllipsis,
   stepsDone: (count) => `${count} ${count === 1 ? "step" : "steps"} done`,
   helperRunning: (name) => `Helper \u201C${name}\u201D is working`,
@@ -4004,6 +4008,54 @@ function useThinkingStatus(active = true) {
   };
 }
 
+// src/work-view/step-icons.ts
+var SDK_TOOL_ICONS = {
+  use_skill: "skill",
+  web_search: "web",
+  read_page: "web",
+  page_screenshot: "snapshot",
+  manage_memory: "memory",
+  search_earlier_conversation: "search",
+  check_tasks: "task",
+  cancel_task: "task",
+  generate_images: "image",
+  show_image: "image",
+  show_video: "video"
+};
+var WORD_ICONS = [
+  ["snapshot", ["screenshot", "snapshot", "capture"]],
+  ["image", ["image", "images", "picture", "photo", "draw"]],
+  ["video", ["video"]],
+  ["check", ["test", "tests", "check", "verify", "lint", "validate", "typecheck", "review"]],
+  ["edit", ["edit", "write", "patch", "replace", "update", "create", "save", "apply", "delete", "remove", "rename", "move", "insert"]],
+  ["search", ["search", "find", "grep", "lookup", "query"]],
+  ["read", ["read", "open", "view", "look", "get", "load", "list", "cat", "show", "inspect"]],
+  ["web", ["web", "browse", "browser", "url", "http", "page", "fetch"]],
+  ["run", ["run", "exec", "execute", "bash", "shell", "command", "terminal", "build", "install", "deploy"]],
+  ["skill", ["skill", "skills"]],
+  ["memory", ["memory", "remember", "note", "notes"]]
+];
+var wordsOf = (toolName) => toolName.replace(/([a-z0-9])([A-Z])/g, "$1 $2").toLowerCase().split(/[^a-z0-9]+/).filter(Boolean);
+function guessStepIcon(toolName) {
+  const known = SDK_TOOL_ICONS[toolName];
+  if (known) return known;
+  if (toolName.startsWith("helper_")) return "helper";
+  if (toolName.includes("__")) return "mcp";
+  const words = wordsOf(toolName);
+  return WORD_ICONS.find(([, keys]) => words.some((word) => keys.includes(word)))?.[0] ?? "tool";
+}
+var iconOfText = (value) => typeof value === "string" && value.trim() ? value.trim() : void 0;
+function stepIconOf(call, { phrases, fallback } = {}) {
+  const entry = phrases && Object.hasOwn(phrases, call.toolName) ? phrases[call.toolName] : void 0;
+  let own;
+  try {
+    own = typeof entry === "function" ? entry(call)?.icon : entry?.icon;
+  } catch {
+    own = void 0;
+  }
+  return iconOfText(own) ?? iconOfText(fallback?.icon) ?? guessStepIcon(call.toolName);
+}
+
 // src/agent-chat.tsx
 import { getToolName as getToolName5, isToolUIPart as isToolUIPart3 } from "ai";
 import { Fragment, memo as memo4, useCallback as useCallback17, useEffect as useEffect14, useId as useId2, useMemo as useMemo16, useRef as useRef17, useState as useState18 } from "react";
@@ -5706,7 +5758,8 @@ function stepPhraseOf(call, {
 }
 
 // src/work-view/work-layout.ts
-function workLayoutOf(entries, { streaming, phrases, labels }) {
+var STEP_ICON_ROW_MAX = 8;
+function workLayoutOf(entries, { streaming, phrases, labels, thoughts = false }) {
   const lastShown = entries.findLastIndex((entry) => entry.kind === "shown" && !entry.blank);
   const layout = [];
   let index = 0;
@@ -5729,39 +5782,56 @@ function workLayoutOf(entries, { streaming, phrases, labels }) {
       } else if (next.blank) blanks.push({ kind: "shown", node: next.node });
       else break;
     }
-    if (streaming && lastStep > lastShown) layout.push({ kind: "live", key, phrase: labels.live(livePhraseOf(group, phrases, labels)) });
-    else {
-      const done = doneLinesOf(group, phrases, labels, !streaming);
+    if (streaming && lastStep > lastShown) {
+      const live = liveStepOf(group, phrases, labels);
+      layout.push({ kind: "live", key, phrase: labels.live(live.phrase), icon: live.icon });
+    } else {
+      const done = doneLinesOf(thoughts ? group : group.filter((step) => step.kind === "tool"), phrases, labels, !streaming);
       if (done.count > 0) layout.push({ kind: "done", key, ...done });
     }
     layout.push(...blanks);
   }
   return layout;
 }
-function livePhraseOf(group, phrases, labels) {
+function liveStepOf(group, phrases, labels) {
   const last = group.at(-1);
   const running = group.findLast((step) => step.kind === "tool" && step.call.state === "running");
-  if (last.kind === "tool" && running?.kind === "tool") return phraseOf(running, phrases, labels);
-  return last.kind === "thinking" ? labels.thinking : labels.stepRunning;
+  if (last.kind === "tool" && running?.kind === "tool") return { phrase: phraseOf(running, phrases, labels), icon: iconOf(running, phrases) };
+  if (last.kind === "thinking") return { phrase: last.title ?? labels.thinking, icon: "thinking" };
+  return { phrase: labels.stepRunning, icon: iconOf(last, phrases) };
+}
+function iconOf(step, phrases) {
+  return stepIconOf(step.call, { phrases, fallback: step.fallback });
 }
 function phraseOf(step, phrases, labels, unfinished = false) {
   return stepPhraseOf({ ...step.call, ...step.title !== void 0 && { title: step.title } }, { phrases, labels, fallback: step.fallback, unfinished });
 }
 function doneLinesOf(group, phrases, labels, finished2) {
-  const lines = [];
-  let count = 0;
-  for (const step of group) {
-    if (step.kind !== "tool") continue;
-    count++;
-    const unfinished = finished2 && step.call.state === "running";
-    const phrase = phraseOf(step, phrases, labels, unfinished);
-    const failed = step.call.state === "error" || unfinished;
-    const previous = lines.at(-1);
-    if (previous?.phrase === phrase && previous.failed === failed) previous.repeats++;
-    else lines.push({ phrase, failed, repeats: 1 });
+  const all = group.map(
+    (step) => step.kind === "tool" ? { ...toolLineOf(step, phrases, labels, finished2), tool: true } : { icon: "thinking", phrase: step.title ?? labels.thought(step.durationMs ?? null), failed: false, tool: false }
+  );
+  const calls = all.filter((line) => line.tool);
+  const icons = all.map((line) => line.icon);
+  return {
+    steps: collapsed(calls, labels).map(({ phrase, failed }) => ({ phrase, failed })),
+    count: calls.length,
+    items: collapsed(all, labels),
+    icons: icons.slice(0, STEP_ICON_ROW_MAX),
+    moreIcons: Math.max(0, icons.length - STEP_ICON_ROW_MAX)
+  };
+}
+function collapsed(lines, labels) {
+  const runs = [];
+  for (const line of lines) {
+    const previous = runs.at(-1);
+    if (previous?.phrase === line.phrase && previous.failed === line.failed && previous.icon === line.icon) previous.repeats++;
+    else runs.push({ icon: line.icon, phrase: line.phrase, failed: line.failed, repeats: 1 });
   }
-  const steps = lines.map(({ phrase, failed, repeats }) => ({ phrase: repeats > 1 ? labels.stepRepeated(phrase, repeats) : phrase, failed }));
-  return { steps, count };
+  return runs.map(({ repeats, ...line }) => repeats > 1 ? { ...line, phrase: labels.stepRepeated(line.phrase, repeats) } : line);
+}
+function toolLineOf(step, phrases, labels, finished2) {
+  const unfinished = finished2 && step.call.state === "running";
+  return { icon: iconOf(step, phrases), phrase: phraseOf(step, phrases, labels, unfinished), failed: step.call.state === "error" || unfinished };
 }
 
 // src/work-view/work-steps-part.tsx
@@ -5776,7 +5846,19 @@ function WorkStepsPart({
   const labels = useChatLabels();
   const [open, setOpen] = usePartOpen(expanded, `${item.key}:work`);
   if (skin.WorkSteps) {
-    return item.kind === "live" ? /* @__PURE__ */ jsx8(skin.WorkSteps, { state: "live", phrase: item.phrase }) : /* @__PURE__ */ jsx8(skin.WorkSteps, { state: "done", steps: item.steps, count: item.count, open, onOpenChange: setOpen });
+    return item.kind === "live" ? /* @__PURE__ */ jsx8(skin.WorkSteps, { state: "live", phrase: item.phrase, icon: item.icon }) : /* @__PURE__ */ jsx8(
+      skin.WorkSteps,
+      {
+        state: "done",
+        steps: item.steps,
+        count: item.count,
+        items: item.items,
+        icons: item.icons,
+        moreIcons: item.moreIcons,
+        open,
+        onOpenChange: setOpen
+      }
+    );
   }
   if (item.kind === "live") return /* @__PURE__ */ jsx8(skin.ToolCallRow, { toolName: item.phrase, title: item.phrase, state: "running", open: false, onOpenChange: keepClosed });
   const title = labels.workView.stepsDone(item.count);
@@ -6394,6 +6476,7 @@ var AgentAnswer = memo4(function AgentAnswer2({
 }) {
   const labels = useChatLabels();
   const durations = message.metadata?.reasoningDurationsMs ?? {};
+  const thoughtTitles = message.metadata?.thoughtTitles ?? {};
   let reasoningIndex = 0;
   const simple = extensions.workView === "simple";
   const entries = [];
@@ -6415,10 +6498,12 @@ var AgentAnswer = memo4(function AgentAnswer2({
     if (part.type === "reasoning") {
       const ordinal = String(reasoningIndex++);
       const streaming = part.state === "streaming";
-      if (!streaming && part.text.trim().length === 0) return;
+      const durationMs = streaming ? null : durations[ordinal] ?? null;
+      const title = streaming ? void 0 : thoughtTitles[ordinal];
+      if (!streaming && part.text.trim().length === 0 && (title === void 0 || !simple)) return;
       step(
         index,
-        { kind: "thinking" },
+        { kind: "thinking", durationMs, ...title !== void 0 && { title } },
         /* @__PURE__ */ jsx9(
           ExpandablePart,
           {
@@ -6427,7 +6512,8 @@ var AgentAnswer = memo4(function AgentAnswer2({
             partId: partKey(message.id, index),
             text: part.text,
             streaming,
-            durationMs: streaming ? null : durations[ordinal] ?? null
+            durationMs,
+            ...title !== void 0 && { title }
           },
           key
         )
@@ -6535,7 +6621,7 @@ var AgentAnswer = memo4(function AgentAnswer2({
       else step(index, toolStepOf(part), row);
     }
   });
-  const parts = simple ? workLayoutOf(entries, { streaming: status === "streaming", phrases: extensions.stepPhrases, labels: labels.workView }).map(
+  const parts = simple ? workLayoutOf(entries, { streaming: status === "streaming", phrases: extensions.stepPhrases, labels: labels.workView, thoughts: Object.keys(thoughtTitles).length > 0 }).map(
     (item) => item.kind === "shown" ? item.node : /* @__PURE__ */ jsx9(WorkStepsPart, { skin, expanded, item }, `${item.key}:work`)
   ) : entries.map((entry) => entry.kind === "shown" ? entry.node : null);
   const text = messageText(message, { voiceAnswer });
@@ -7078,10 +7164,12 @@ export {
   useAgentChat,
   useModelChoice,
   useThinkingStatus,
+  guessStepIcon,
+  stepIconOf,
   AgentChat,
   useChatList,
   useChatListView,
   activeChatTitle,
   useWorkspaceListSync
 };
-//# sourceMappingURL=chunk-JLGBVDAR.js.map
+//# sourceMappingURL=chunk-Z7X5D4OF.js.map