@ykurilov/agent-chat-react 0.70.1 → 0.71.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @ykurilov/agent-chat-react
 
+## 0.71.1
+
+### Patch Changes
+
+- 519914e: Лента закрепляет только сообщения у текущего окна, пока следует за ответом. При расхождении измеренных высот DOM и оценок виртуального списка больше не монтируется весь остаток длинной истории. Растущий ответ и черновик правки сохраняют отдельное закрепление.
+  
+  Прилипание к низу сохраняется, когда пересчёт высот сдвигает сообщение и прокрутку на одинаковое расстояние вверх, даже при росте списка. Ввод читателя вверх по-прежнему останавливает следование за ответом.
+  
+  Служебные обёртки сообщений не анимируют координаты: глобальное правило уменьшенного движения с ненулевой длительностью перехода больше не создаёт пустоты между строками в Safari.
+  
+  Рост ответа не перезаписывает ещё не обработанный уход читателя вверх: положение учитывается до доводки низа, даже если браузер задержал событие scroll.
+  
+  После открытия и немедленной отправки начальная прокрутка больше не удерживает асинхронную цель внизу: уход читателя вверх сохраняется при дальнейших замерах ответа. Обновление ничего не требует.
+
+## 0.71.0
+
+### Minor Changes
+
+- 8b8c651: Три вида поля Одуванчик: сжатое, обычное и расширенное. Настройки модели/провайдера/рассуждений из каталога, цена и метки, инструменты приложения, шторка телефона. Сфера и токены из опубликованных ds-react/ds-tokens. Необязательный договор скина v29, сохранение уровня ответа для подписи в истории.
+
 ## 0.70.1
 
 No changes in this release.

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

@@ -367,6 +367,7 @@ var russianLabels = {
   notices: russianNotices,
   messengerStatus: russianMessengerStatus,
   workView: russianWorkView,
+  composerSettings: { levels: { off: "\u0412\u044B\u043A\u043B", on: "\u0412\u043A\u043B", minimal: "\u041C\u0438\u043D\u0438\u043C\u0443\u043C", low: "\u041D\u0438\u0437\u043A\u043E", medium: "\u0421\u0440\u0435\u0434\u043D\u0435", high: "\u0412\u044B\u0441\u043E\u043A\u043E", max: "\u041C\u0430\u043A\u0441\u0438\u043C\u0443\u043C" }, model: "\u041C\u043E\u0434\u0435\u043B\u044C", reasoning: "\u0420\u0430\u0441\u0441\u0443\u0436\u0434\u0435\u043D\u0438\u044F", tools: "\u0418\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442\u044B", settings: "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u043E\u0442\u0432\u0435\u0442\u0430", done: "\u0413\u043E\u0442\u043E\u0432\u043E", via: "\u0427\u0435\u0440\u0435\u0437", search: "\u041D\u0430\u0439\u0442\u0438 \u043C\u043E\u0434\u0435\u043B\u044C", showReasoning: "\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u0445\u043E\u0434 \u043C\u044B\u0441\u043B\u0438", project: "\u041F\u0440\u043E\u0435\u043A\u0442", file: "\u0424\u0430\u0439\u043B", image: "\u041A\u0430\u0440\u0442\u0438\u043D\u043A\u0430", textModels: "\u0422\u0435\u043A\u0441\u0442\u043E\u0432\u044B\u0435 \u0437\u0430\u0434\u0430\u0447\u0438", imageModels: "\u0422\u0435\u043A\u0441\u0442 \u0438 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F", models: "\u041C\u043E\u0434\u0435\u043B\u0438", noResults: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E", price: "USD \u0437\u0430 \u043C\u0438\u043B\u043B\u0438\u043E\u043D \u0442\u043E\u043A\u0435\u043D\u043E\u0432", input: "\u0432\u0445\u043E\u0434", output: "\u0432\u044B\u0445\u043E\u0434" },
   composerPlaceholder: "\u041D\u0430\u043F\u0438\u0448\u0438\u0442\u0435 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435",
   composerLabel: "\u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435",
   send: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C",
@@ -683,6 +684,7 @@ var englishLabels = {
   locale: "en",
   ...englishWorkLabels,
   workView: englishWorkViewLabels,
+  composerSettings: { levels: { off: "Off", on: "On", minimal: "Minimal", low: "Low", medium: "Medium", high: "High", max: "Max" }, model: "Model", reasoning: "Reasoning", tools: "Tools", settings: "Response settings", done: "Done", via: "Via", search: "Find model", showReasoning: "Show reasoning", project: "Project", file: "File", image: "Image", textModels: "Text tasks", imageModels: "Text and images", models: "Models", noResults: "No results", price: "USD per million tokens", input: "input", output: "output" },
   composerPlaceholder: "Write a message",
   composerLabel: "Message",
   send: "Send",
@@ -961,6 +963,7 @@ function ChatLabelsProvider({ labels, children }) {
   const resolved = useMemo(
     () => ({
       ...labels,
+      composerSettings: { ...(labels.locale?.startsWith("en") ? englishLabels : russianLabels).composerSettings, ...labels.composerSettings },
       externalImageLink: labels.externalImageLink ?? russianLabels.externalImageLink,
       answerCutByLength: labels.answerCutByLength ?? russianLabels.answerCutByLength,
       answerEdited: labels.answerEdited ?? russianLabels.answerEdited,
@@ -3886,6 +3889,10 @@ function useModelChoice({ api, chatId, savedChoice, savedChoicePending = false,
           models: provider.models.map((model) => ({
             id: model.id,
             name: model.displayName,
+            ...model.group !== void 0 && { group: model.group },
+            ...model.description !== void 0 && { description: model.description },
+            ...model.tags !== void 0 && { tags: model.tags },
+            ...model.price !== void 0 && { price: model.price },
             ...typeof model.acceptsImages === "boolean" && { acceptsImages: model.acceptsImages }
           }))
         })),
@@ -4190,7 +4197,10 @@ var SCROLL_KEYS = /* @__PURE__ */ new Set([...JUMP_KEYS, "PageUp", "ArrowUp", "H
 var READER_INPUT_WINDOW_MS = 250;
 var UP_KEYS = /* @__PURE__ */ new Set(["PageUp", "ArrowUp", "Home"]);
 function FeedItem({ style, children, ref }) {
-  return /* @__PURE__ */ jsx3("div", { ref, style, "data-feed-item": "", children });
+  return /* @__PURE__ */ jsx3("div", { ref, style: { ...style, transitionProperty: "none" }, "data-feed-item": "", children });
+}
+function FeedWindow({ style, children, ref }) {
+  return /* @__PURE__ */ jsx3("div", { ref, style: { ...style, transitionProperty: "none" }, children });
 }
 function isTextField(target) {
   if (!(target instanceof Element)) return false;
@@ -4207,6 +4217,7 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
   }, []);
   const lastHeight = useRef7(0);
   const lastTop = useRef7(0);
+  const syncScrollState = useRef7(null);
   const shrunkSinceScroll = useRef7(0);
   const openedAtBottom = useRef7(false);
   const userJumpUntil = useRef7(0);
@@ -4223,43 +4234,60 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
   const lastIndex = messages.length - 1;
   useEffect6(() => setScrollerReady(true), []);
   useLayoutEffect(() => {
-    const scroller = scrollRef.current;
+    const scroller2 = scrollRef.current;
     const root = rootRef.current;
-    if (!scrollerReady || !scroller || !root) return;
+    if (!scrollerReady || !scroller2 || !root) return;
     const measure = () => {
-      const offset = root.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+      const offset = root.getBoundingClientRect().top - scroller2.getBoundingClientRect().top + scroller2.scrollTop;
       setStartMargin(Math.max(0, Math.round(offset)));
     };
     measure();
     const observer = new ResizeObserver(measure);
-    observer.observe(scroller);
+    observer.observe(scroller2);
     return () => observer.disconnect();
   }, [scrollRef, scrollerReady]);
   useEffect6(() => {
-    const scroller = scrollRef.current;
-    if (!scrollerReady || !scroller) return;
-    lastHeight.current = scroller.scrollHeight;
-    lastTop.current = scroller.scrollTop;
+    const scroller2 = scrollRef.current;
+    if (!scrollerReady || !scroller2) return;
+    lastHeight.current = scroller2.scrollHeight;
+    lastTop.current = scroller2.scrollTop;
+    let anchor;
+    const rememberAnchor = () => {
+      const view = scroller2.getBoundingClientRect();
+      for (const element of rootRef.current?.querySelectorAll("[data-feed-item]") ?? []) {
+        if (element.style.visibility === "hidden") continue;
+        const box = element.getBoundingClientRect();
+        if (box.bottom > view.top && box.top < view.bottom) {
+          anchor = { element, offset: box.top - view.top + scroller2.scrollTop };
+          return;
+        }
+      }
+      anchor = void 0;
+    };
+    rememberAnchor();
     const onScroll = () => {
-      const height = scroller.scrollHeight;
-      const top = scroller.scrollTop;
-      const near = Math.min(height, lastHeight.current) - top - scroller.clientHeight < STICK_TO_BOTTOM_PX;
+      const height = scroller2.scrollHeight;
+      const top = scroller2.scrollTop;
+      const near = Math.min(height, lastHeight.current) - top - scroller2.clientHeight < STICK_TO_BOTTOM_PX;
       const shrunk = shrunkSinceScroll.current + Math.max(0, lastHeight.current - height);
       shrunkSinceScroll.current = 0;
       const step = top - lastTop.current;
       const now = performance.now();
       const readerActed = now < readerInputUntil.current || now < userJumpUntil.current;
-      const movedByLayout = step < 0 && -step <= 2 * shrunk && !readerActed;
+      const anchorShift = anchor && scroller2.contains(anchor.element) ? anchor.element.getBoundingClientRect().top - scroller2.getBoundingClientRect().top + top - anchor.offset : 0;
+      const compensated = anchorShift < 0 && Math.abs(step - anchorShift) <= 1;
+      const movedByLayout = step < 0 && (-step <= 2 * shrunk || compensated) && !readerActed;
       lastTop.current = top;
       lastHeight.current = height;
+      rememberAnchor();
       if (movedByLayout) {
-        if (stuck.current) scroller.scrollTop = height;
+        if (stuck.current) scroller2.scrollTop = height;
         return;
       }
       if (step < 0) stick(readerActed ? false : near);
       else if (step > 0) {
         readerUpUntil.current = 0;
-        if (near && (step <= scroller.clientHeight || performance.now() < userJumpUntil.current)) stick(true);
+        if (near && (step <= scroller2.clientHeight || performance.now() < userJumpUntil.current)) stick(true);
       }
     };
     const onKeyDown = (event) => {
@@ -4288,38 +4316,41 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
     const onPointerUp = () => {
       if (userJumpUntil.current > performance.now() + POINTER_JUMP_WINDOW_MS) userJumpUntil.current = performance.now() + POINTER_JUMP_WINDOW_MS;
     };
-    scroller.addEventListener("scroll", onScroll, { passive: true });
+    syncScrollState.current = onScroll;
+    scroller2.addEventListener("scroll", onScroll, { passive: true });
     document.addEventListener("keydown", onKeyDown);
-    scroller.addEventListener("pointerdown", onPointerDown);
-    scroller.addEventListener("wheel", onWheel, { passive: true });
-    scroller.addEventListener("touchstart", onTouchStart, { passive: true });
-    scroller.addEventListener("touchmove", onTouchMove, { passive: true });
+    scroller2.addEventListener("pointerdown", onPointerDown);
+    scroller2.addEventListener("wheel", onWheel, { passive: true });
+    scroller2.addEventListener("touchstart", onTouchStart, { passive: true });
+    scroller2.addEventListener("touchmove", onTouchMove, { passive: true });
     window.addEventListener("pointerup", onPointerUp);
     window.addEventListener("pointercancel", onPointerUp);
     return () => {
-      scroller.removeEventListener("scroll", onScroll);
+      syncScrollState.current = null;
+      scroller2.removeEventListener("scroll", onScroll);
       document.removeEventListener("keydown", onKeyDown);
-      scroller.removeEventListener("pointerdown", onPointerDown);
-      scroller.removeEventListener("wheel", onWheel);
-      scroller.removeEventListener("touchstart", onTouchStart);
-      scroller.removeEventListener("touchmove", onTouchMove);
+      scroller2.removeEventListener("pointerdown", onPointerDown);
+      scroller2.removeEventListener("wheel", onWheel);
+      scroller2.removeEventListener("touchstart", onTouchStart);
+      scroller2.removeEventListener("touchmove", onTouchMove);
       window.removeEventListener("pointerup", onPointerUp);
       window.removeEventListener("pointercancel", onPointerUp);
     };
   }, [scrollRef, scrollerReady, stick]);
   useEffect6(() => {
-    const scroller = scrollRef.current;
+    const scroller2 = scrollRef.current;
     const root = rootRef.current;
-    if (!scrollerReady || !scroller || !root) return;
+    if (!scrollerReady || !scroller2 || !root) return;
     const settleAtBottom = () => {
-      const height = scroller.scrollHeight;
-      const clientHeight = scroller.clientHeight;
+      if (scroller2.scrollTop < lastTop.current) syncScrollState.current?.();
+      const height = scroller2.scrollHeight;
+      const clientHeight = scroller2.clientHeight;
       shrunkSinceScroll.current += Math.max(0, lastHeight.current - height);
       lastHeight.current = height;
       const needed = height > settledHeight.current || clientHeight < settledClientHeight.current;
       settledHeight.current = height;
       settledClientHeight.current = clientHeight;
-      if (stuck.current && needed && performance.now() >= readerUpUntil.current) scroller.scrollTop = height;
+      if (stuck.current && needed && performance.now() >= readerUpUntil.current) scroller2.scrollTop = height;
     };
     let followUp = 0;
     const follow = () => {
@@ -4334,7 +4365,7 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
     const listObserver = new MutationObserver(follow);
     listObserver.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: ["style"] });
     const scrollerObserver = new ResizeObserver(follow);
-    scrollerObserver.observe(scroller);
+    scrollerObserver.observe(scroller2);
     return () => {
       listObserver.disconnect();
       scrollerObserver.disconnect();
@@ -4349,8 +4380,8 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
       setPositioned(false);
       return;
     }
-    const scroller = scrollRef.current;
-    if (!scrollerReady || !scroller || openedAtBottom.current) return;
+    const scroller2 = scrollRef.current;
+    if (!scrollerReady || !scroller2 || openedAtBottom.current) return;
     openedAtBottom.current = true;
     const focusIndex = openAtMessageId === void 0 ? -1 : messages.findIndex((message) => message.id === openAtMessageId);
     stick(focusIndex < 0 || focusIndex === lastIndex);
@@ -4358,12 +4389,14 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
       virtualizerRef.current?.scrollToIndex(focusIndex, { align: "start" });
       openingScrollUntil.current = performance.now() + OPENING_SCROLL_QUIET_MS;
     } else {
-      virtualizerRef.current?.scrollTo(BOTTOM_SCROLL_TARGET);
+      queueMicrotask(() => {
+        if (rootRef.current?.isConnected && scrollRef.current === scroller2 && stuck.current) scroller2.scrollTop = scroller2.scrollHeight;
+      });
       openingScrollUntil.current = 0;
     }
     let frame = 0;
     const cancel = () => {
-      scroller.removeEventListener("scroll", settle);
+      scroller2.removeEventListener("scroll", settle);
       cancelAnimationFrame(frame);
       cancelSettle.current = null;
     };
@@ -4372,7 +4405,7 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
       setPositioned(true);
     };
     cancelSettle.current = cancel;
-    scroller.addEventListener("scroll", settle, { once: true });
+    scroller2.addEventListener("scroll", settle, { once: true });
     frame = requestAnimationFrame(() => {
       frame = requestAnimationFrame(settle);
     });
@@ -4382,19 +4415,22 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
     stick(true);
     if (performance.now() < openingScrollUntil.current) virtualizerRef.current?.scrollTo(BOTTOM_SCROLL_TARGET);
     openingScrollUntil.current = 0;
-    const scroller = scrollRef.current;
-    if (scroller) scroller.scrollTop = scroller.scrollHeight;
+    const scroller2 = scrollRef.current;
+    if (scroller2) scroller2.scrollTop = scroller2.scrollHeight;
   }, [scrollRef, stick]);
   useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
   const virtualizer = virtualizerRef.current;
   const editedIndex = keepMountedMessageId === void 0 ? -1 : messages.findIndex((message) => message.id === keepMountedMessageId);
-  const tailStart = positioned && followingBottom && virtualizer && lastIndex >= 0 ? Math.min(lastIndex, Math.max(0, virtualizer.findItemIndex(virtualizer.scrollOffset - BUFFER_PX))) : lastIndex + 1;
+  const scroller = scrollRef.current;
+  const keepBuffer = positioned && followingBottom && virtualizer && scroller && lastIndex >= 0;
+  const bufferStart = keepBuffer ? Math.max(0, virtualizer.findItemIndex(scroller.scrollTop - BUFFER_PX)) : 0;
+  const bufferEnd = keepBuffer ? Math.min(lastIndex, virtualizer.findItemIndex(scroller.scrollTop + scroller.clientHeight)) : -1;
   const keepMounted = useMemo6(() => {
-    const kept = new Set(Array.from({ length: Math.max(0, lastIndex + 1 - tailStart) }, (_, offset) => tailStart + offset));
+    const kept = new Set(Array.from({ length: Math.max(0, bufferEnd - bufferStart + 1) }, (_, offset) => bufferStart + offset));
     if (keepLastMounted && lastIndex >= 0) kept.add(lastIndex);
     if (editedIndex >= 0) kept.add(editedIndex);
     return [...kept].sort((a, b) => a - b);
-  }, [editedIndex, keepLastMounted, lastIndex, tailStart]);
+  }, [bufferEnd, bufferStart, editedIndex, keepLastMounted, lastIndex]);
   return /* @__PURE__ */ jsx3("div", { ref: rootRef, children: scrollerReady && /* @__PURE__ */ jsx3(
     Virtualizer,
     {
@@ -4404,6 +4440,7 @@ function MessageFeedView({ scrollRef, messages, renderMessage, keepLastMounted,
       itemSize: UNMEASURED_MESSAGE_HEIGHT_PX,
       bufferSize: positioned ? BUFFER_PX : 0,
       item: FeedItem,
+      as: FeedWindow,
       keepMounted,
       startMargin,
       children: (message, index) => renderMessage(message, index)
@@ -5784,7 +5821,8 @@ function workLayoutOf(entries, { streaming, phrases, labels, thoughts = false })
     }
     if (streaming && lastStep > lastShown) {
       const live = liveStepOf(group, phrases, labels);
-      layout.push({ kind: "live", key, phrase: labels.live(live.phrase), icon: live.icon });
+      const completed = doneLinesOf((thoughts ? group : group.filter((step) => step.kind === "tool")).filter((step) => step.kind === "tool" && step.call.state !== "running"), phrases, labels, false).items;
+      layout.push({ kind: "live", key, phrase: labels.live(live.phrase), icon: live.icon, ...completed.length > 0 && { completed } });
     } 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 });
@@ -5846,7 +5884,7 @@ 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, icon: item.icon }) : /* @__PURE__ */ jsx8(
+    return item.kind === "live" ? /* @__PURE__ */ jsx8(skin.WorkSteps, { state: "live", phrase: item.phrase, icon: item.icon, ...item.completed && { completed: item.completed } }) : /* @__PURE__ */ jsx8(
       skin.WorkSteps,
       {
         state: "done",
@@ -5881,7 +5919,7 @@ function SubjectAgentChat(props) {
   if (found.state === "failed") return /* @__PURE__ */ jsx9(props.skin.ErrorNotice, { kind: "other", onRetry: found.retry });
   return /* @__PURE__ */ jsx9(SubjectChatLoading, { skin: props.skin });
 }
-function AgentChatBody({ api, chatId, skin, liveness, voice, voiceDialog, attachments: attachmentsPlugin, spendingLimits, onBusyChange, appBridge, initialDraft, answerEditing, onFeedChange, messageActions, onTurnFinished, onTurnRefused, composerActions, onAppEvent, onChatAccessChange, onStateChange, onModelChosen, onChatUnavailable, reloadKey, steering, widgets, diagrams, liveDemos, images, videos, appEvents, workView, stepPhrases, noticeLines }) {
+function AgentChatBody({ composerOptions, api, chatId, skin, liveness, voice, voiceDialog, attachments: attachmentsPlugin, spendingLimits, onBusyChange, appBridge, initialDraft, answerEditing, onFeedChange, messageActions, onTurnFinished, onTurnRefused, composerActions, onAppEvent, onChatAccessChange, onStateChange, onModelChosen, onChatUnavailable, reloadKey, steering, widgets, diagrams, liveDemos, images, videos, appEvents, workView, stepPhrases, noticeLines, answerDetails }) {
   const spendingNoticeId = useId2();
   const closedNoticeId = useId2();
   const chat = useAgentChat({
@@ -5913,8 +5951,17 @@ function AgentChatBody({ api, chatId, skin, liveness, voice, voiceDialog, attach
   const attachments = attachmentsPlugin?.useController({ api, chatId, modelSeesImages: chatModelSeesImages });
   const describeFiles = attachments?.describe;
   const imageClients = useSameList(imageClientsOf(images));
+  const [localReasoningVisible, setLocalReasoningVisible] = useState18(true);
+  const showReasoning = composerOptions?.reasoningVisibility?.value ?? localReasoningVisible;
+  const effectiveComposerOptions = useMemo16(() => ({ ...composerOptions, reasoningVisibility: composerOptions?.reasoningVisibility ?? { value: showReasoning, onChange: setLocalReasoningVisible } }), [composerOptions, showReasoning]);
+  const showAnswerDetails = answerDetails ?? composerOptions?.variant === "extended";
+  const answerNamesKey = showAnswerDetails ? JSON.stringify(modelChoice.providers.map(({ id, name, models }) => ({ id, name, models: models.map(({ id: id2, name: name2 }) => ({ id: id2, name: name2 })) }))) : "";
+  const answerModelNames = useMemo16(() => answerNamesKey ? JSON.parse(answerNamesKey) : void 0, [answerNamesKey]);
   const extensions = useMemo16(
     () => ({
+      reasoningVisible: showReasoning,
+      answerDetails: showAnswerDetails,
+      ...answerModelNames && { modelNames: answerModelNames },
       ...widgets && { widgets },
       ...diagrams && { diagrams },
       ...liveDemos && { liveDemos },
@@ -5925,7 +5972,7 @@ function AgentChatBody({ api, chatId, skin, liveness, voice, voiceDialog, attach
       ...stepPhrases && { stepPhrases },
       ...noticeLines && { noticeLines }
     }),
-    [widgets, diagrams, liveDemos, imageClients, videos, appEvents, workView, stepPhrases, noticeLines]
+    [widgets, diagrams, liveDemos, imageClients, videos, appEvents, workView, stepPhrases, noticeLines, showReasoning, showAnswerDetails, answerModelNames]
   );
   const scrollRef = useRef17(null);
   const feedRef = useRef17(null);
@@ -6301,6 +6348,7 @@ ${text}` : text),
       composer: /* @__PURE__ */ jsx9(
         skin.Composer,
         {
+          options: effectiveComposerOptions,
           value: chat.value,
           onValueChange: chat.setValue,
           onSubmit: submitComposer,
@@ -6496,6 +6544,7 @@ var AgentAnswer = memo4(function AgentAnswer2({
     const imagesView = isToolUIPart3(part) ? describeImages?.(part) : void 0;
     const videoView = isToolUIPart3(part) && extensions.videos && getToolName5(part) === extensions.videos.toolName ? extensions.videos.describe(part) : void 0;
     if (part.type === "reasoning") {
+      if (extensions.reasoningVisible === false) return;
       const ordinal = String(reasoningIndex++);
       const streaming = part.state === "streaming";
       const durationMs = streaming ? null : durations[ordinal] ?? null;
@@ -6631,9 +6680,12 @@ var AgentAnswer = memo4(function AgentAnswer2({
   }));
   const errorText = status === "error" ? customErrorText(labels, message.metadata?.error) : void 0;
   const notice = status === "error" ? /* @__PURE__ */ jsx9(skin.ErrorNotice, { kind: message.metadata?.error?.kind ?? "other", ...errorText !== void 0 && { text: errorText }, ...onRetry && { onRetry } }) : void 0;
+  const answerProvider = extensions.modelNames?.find((provider) => provider.id === message.metadata?.providerId);
+  const answerModel = answerProvider?.models.find((model) => model.id === message.metadata?.modelId);
   return /* @__PURE__ */ jsx9(ThinkingClockProvider, { id: message.id, waiting: status === "streaming", children: /* @__PURE__ */ jsxs(
     skin.AgentMessage,
     {
+      ...extensions.answerDetails && message.metadata?.modelId && message.metadata?.providerId && { modelDetails: { modelId: message.metadata.modelId, providerId: message.metadata.providerId, ...answerProvider && { providerName: answerProvider.name }, ...answerModel && { modelName: answerModel.name }, ...message.metadata.reasoningLevel !== void 0 && { reasoning: message.metadata.reasoningLevel } } },
       status,
       empty: !steered && status !== "streaming" && status !== "awaiting_approval" && text.trim().length === 0,
       onCopy: () => void navigator.clipboard?.writeText(text),
@@ -7172,4 +7224,4 @@ export {
   activeChatTitle,
   useWorkspaceListSync
 };
-//# sourceMappingURL=chunk-Z7X5D4OF.js.map
+//# sourceMappingURL=chunk-WJJY2WLQ.js.map