@adecore/agents-react 0.31.12 → 0.32.0

package/dist/chat/ui/MermaidBlock.js

@@ -1,95 +1,265 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useContext, useEffect, useId, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Code, Workflow } from 'lucide-react';
 import { IconButton } from '@adecore/ui';
-import { useChatHost } from '../../host.js';
 import { CodeBlock } from './CodeBlock.js';
 import { CodeStreamingContext } from './code-streaming.js';
 import { MERMAID_TOKENS, mermaidConfig, sizedSvg, svgDataUrl } from './mermaid.js';
 import { watchTheme } from './theme-watch.js';
+import { useHostCodeMode } from '../../host-hooks.js';
 // Mermaid keeps one configuration for the page, so one diagram is drawn at a time with its own.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 let queue = Promise.resolve();
 let probeCanvas = null;
 /* A token as an opaque `#rrggbb` over `ground`, which is what Mermaid's color math reads. */
 function resolveColor(element, token, ground) {
-    probeCanvas ??= document.createElement('canvas');
-    probeCanvas.width = 1;
-    probeCanvas.height = 1;
-    const context = probeCanvas.getContext('2d', { willReadFrequently: true });
-    const value = getComputedStyle(element).getPropertyValue(token).trim();
-    if (context === null || value === '') {
-        return ground;
-    }
-    context.fillStyle = ground;
-    context.fillRect(0, 0, 1, 1);
-    context.fillStyle = value;
-    context.fillRect(0, 0, 1, 1);
-    const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;
-    return `#${[red, green, blue].map((channel) => channel.toString(16).padStart(2, '0')).join('')}`;
+  probeCanvas ??= document.createElement('canvas');
+  probeCanvas.width = 1;
+  probeCanvas.height = 1;
+  const context = probeCanvas.getContext('2d', {
+    willReadFrequently: true
+  });
+  const value = getComputedStyle(element).getPropertyValue(token).trim();
+  if (context === null || value === '') {
+    return ground;
+  }
+  context.fillStyle = ground;
+  context.fillRect(0, 0, 1, 1);
+  context.fillStyle = value;
+  context.fillRect(0, 0, 1, 1);
+  const [red, green, blue] = context.getImageData(0, 0, 1, 1).data;
+  return `#${[red, green, blue].map(channel => channel.toString(16).padStart(2, '0')).join('')}`;
 }
 function themeColors(element) {
-    const ground = resolveColor(element, MERMAID_TOKENS.ground, '#808080');
-    const entries = Object.entries(MERMAID_TOKENS).map(([name, token]) => [name, name === 'ground' ? ground : resolveColor(element, token, ground)]);
-    return Object.fromEntries(entries);
+  const ground = resolveColor(element, MERMAID_TOKENS.ground, '#808080');
+  const entries = Object.entries(MERMAID_TOKENS).map(([name, token]) => [name, name === 'ground' ? ground : resolveColor(element, token, ground)]);
+  return Object.fromEntries(entries);
 }
 function diagramLook(element) {
-    const style = getComputedStyle(element);
-    return { colors: themeColors(element), font: { family: style.fontFamily, size: style.fontSize } };
+  const style = getComputedStyle(element);
+  return {
+    colors: themeColors(element),
+    font: {
+      family: style.fontFamily,
+      size: style.fontSize
+    }
+  };
 }
 async function drawDiagram(id, source, look, dark) {
-    const { default: mermaid } = await import('mermaid');
-    mermaid.initialize(mermaidConfig(look.colors, dark, look.font));
-    const { svg } = await mermaid.render(id, source);
-    return sizedSvg(svg);
+  const {
+    default: mermaid
+  } = await import('mermaid');
+  mermaid.initialize(mermaidConfig(look.colors, dark, look.font));
+  const {
+    svg
+  } = await mermaid.render(id, source);
+  return sizedSvg(svg);
 }
 /*
  * A ```mermaid fence, drawn as the diagram once the fence is closed. Mermaid is large, so it loads on
  * the first diagram of the page. While the fence grows, and when the text is no diagram Mermaid can
  * draw, it is the code block it would otherwise be.
  */
-export function MermaidBlock({ code }) {
-    const host = useChatHost();
-    const { t } = useTranslation('agent-chat');
-    const streaming = useContext(CodeStreamingContext);
-    const dark = host.code.useMode() === 'dark';
-    const id = `mermaid-${useId().replace(/[^\w-]/g, '')}`;
-    const frame = useRef(null);
-    const [source, setSource] = useState(false);
-    const [drawing, setDrawing] = useState({ state: 'drawing' });
-    // The look of the diagram on screen or on its way there, null before the first.
-    const drawnLook = useRef(null);
-    const [themeRevision, setThemeRevision] = useState(0);
-    // An app may change its colors without turning light or dark, which only the root of the page tells.
-    useEffect(() => {
-        const element = frame.current;
-        if (element === null) {
-            return;
-        }
-        return watchTheme(element.ownerDocument, () => {
-            if (drawnLook.current !== null && JSON.stringify(diagramLook(element)) !== drawnLook.current) {
-                setThemeRevision((revision) => revision + 1);
-            }
-        });
-    }, []);
-    useEffect(() => {
-        const element = frame.current;
-        if (streaming || element === null) {
-            return;
+export function MermaidBlock(t0) {
+  const $ = _c(37);
+  const {
+    code
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const streaming = useContext(CodeStreamingContext);
+  const dark = useHostCodeMode() === "dark";
+  const t1 = useId();
+  let t2;
+  if ($[0] !== t1) {
+    let t3;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = /[^\w-]/g;
+      $[2] = t3;
+    } else {
+      t3 = $[2];
+    }
+    t2 = t1.replace(t3, "");
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const id = `mermaid-${t2}`;
+  const frame = useRef(null);
+  const [source, setSource] = useState(false);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      state: "drawing"
+    };
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const [drawing, setDrawing] = useState(t3);
+  const drawnLook = useRef(null);
+  const [themeRevision, setThemeRevision] = useState(0);
+  let t4;
+  let t5;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => {
+      const element = frame.current;
+      if (element === null) {
+        return;
+      }
+      return watchTheme(element.ownerDocument, () => {
+        if (drawnLook.current !== null && JSON.stringify(diagramLook(element)) !== drawnLook.current) {
+          setThemeRevision(_temp);
         }
-        let cancelled = false;
-        const look = diagramLook(element);
-        drawnLook.current = JSON.stringify(look);
-        // A diagram already drawn stays until the next one is there, so a change of the theme does not make it blink.
-        setDrawing((current) => (current.state === 'drawn' ? current : { state: 'drawing' }));
-        const drawn = queue.then(() => (cancelled ? null : drawDiagram(id, code, look, dark)));
-        queue = drawn.catch(() => undefined);
-        drawn.then((image) => !cancelled && setDrawing(image === null ? { state: 'failed' } : { state: 'drawn', image }), () => !cancelled && setDrawing({ state: 'failed' }));
-        return () => {
-            cancelled = true;
-        };
-    }, [code, dark, id, streaming, themeRevision]);
-    const showsDiagram = !streaming && !source && drawing.state !== 'failed';
-    const toggle = streaming || drawing.state === 'failed' ? undefined : (_jsx(IconButton, { icon: source ? Workflow : Code, size: "sm", label: source ? t('code.mermaid.showDiagram') : t('code.mermaid.showSource'), onClick: () => setSource((shown) => !shown) }));
-    return (_jsxs("div", { ref: frame, children: [_jsx(CodeBlock, { code: code, lang: "mermaid", actions: toggle, view: showsDiagram ? (_jsx("div", { className: "overflow-x-auto p-3", "aria-busy": drawing.state === 'drawing' || undefined, children: drawing.state === 'drawn' && (_jsx("img", { src: svgDataUrl(drawing.image.svg), width: drawing.image.width, height: drawing.image.height, alt: t('code.mermaid.diagram'), className: "m-0 max-w-none", draggable: false })) })) : undefined }), drawing.state === 'failed' && _jsx("p", { className: "m-0 mt-1 text-xs text-text-faint", children: t('code.mermaid.failed') })] }));
+      });
+    };
+    t5 = [];
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t4 = $[4];
+    t5 = $[5];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[6] !== code || $[7] !== dark || $[8] !== id || $[9] !== streaming) {
+    t6 = () => {
+      const element_0 = frame.current;
+      if (streaming || element_0 === null) {
+        return;
+      }
+      let cancelled = false;
+      const look = diagramLook(element_0);
+      drawnLook.current = JSON.stringify(look);
+      setDrawing(_temp2);
+      const drawn = queue.then(() => cancelled ? null : drawDiagram(id, code, look, dark));
+      queue = drawn.catch(_temp3);
+      drawn.then(image => !cancelled && setDrawing(image === null ? {
+        state: "failed"
+      } : {
+        state: "drawn",
+        image
+      }), () => !cancelled && setDrawing({
+        state: "failed"
+      }));
+      return () => {
+        cancelled = true;
+      };
+    };
+    $[6] = code;
+    $[7] = dark;
+    $[8] = id;
+    $[9] = streaming;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== code || $[12] !== dark || $[13] !== id || $[14] !== streaming || $[15] !== themeRevision) {
+    t7 = [code, dark, id, streaming, themeRevision];
+    $[11] = code;
+    $[12] = dark;
+    $[13] = id;
+    $[14] = streaming;
+    $[15] = themeRevision;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  useEffect(t6, t7);
+  const showsDiagram = !streaming && !source && drawing.state !== "failed";
+  let t8;
+  if ($[17] !== drawing.state || $[18] !== source || $[19] !== streaming || $[20] !== t) {
+    t8 = streaming || drawing.state === "failed" ? undefined : /*#__PURE__*/_jsx(IconButton, {
+      icon: source ? Workflow : Code,
+      size: "sm",
+      label: source ? t("code.mermaid.showDiagram") : t("code.mermaid.showSource"),
+      onClick: () => setSource(_temp4)
+    });
+    $[17] = drawing.state;
+    $[18] = source;
+    $[19] = streaming;
+    $[20] = t;
+    $[21] = t8;
+  } else {
+    t8 = $[21];
+  }
+  const toggle = t8;
+  let t9;
+  if ($[22] !== drawing.image || $[23] !== drawing.state || $[24] !== showsDiagram || $[25] !== t) {
+    t9 = showsDiagram ? /*#__PURE__*/_jsx("div", {
+      className: "overflow-x-auto p-3",
+      "aria-busy": drawing.state === "drawing" || undefined,
+      children: drawing.state === "drawn" && /*#__PURE__*/_jsx("img", {
+        src: svgDataUrl(drawing.image.svg),
+        width: drawing.image.width,
+        height: drawing.image.height,
+        alt: t("code.mermaid.diagram"),
+        className: "m-0 max-w-none",
+        draggable: false
+      })
+    }) : undefined;
+    $[22] = drawing.image;
+    $[23] = drawing.state;
+    $[24] = showsDiagram;
+    $[25] = t;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  let t10;
+  if ($[27] !== code || $[28] !== t9 || $[29] !== toggle) {
+    t10 = /*#__PURE__*/_jsx(CodeBlock, {
+      code: code,
+      lang: "mermaid",
+      actions: toggle,
+      view: t9
+    });
+    $[27] = code;
+    $[28] = t9;
+    $[29] = toggle;
+    $[30] = t10;
+  } else {
+    t10 = $[30];
+  }
+  let t11;
+  if ($[31] !== drawing.state || $[32] !== t) {
+    t11 = drawing.state === "failed" && /*#__PURE__*/_jsx("p", {
+      className: "m-0 mt-1 text-xs text-text-faint",
+      children: t("code.mermaid.failed")
+    });
+    $[31] = drawing.state;
+    $[32] = t;
+    $[33] = t11;
+  } else {
+    t11 = $[33];
+  }
+  let t12;
+  if ($[34] !== t10 || $[35] !== t11) {
+    t12 = /*#__PURE__*/_jsxs("div", {
+      ref: frame,
+      children: [t10, t11]
+    });
+    $[34] = t10;
+    $[35] = t11;
+    $[36] = t12;
+  } else {
+    t12 = $[36];
+  }
+  return t12;
+}
+function _temp4(shown) {
+  return !shown;
+}
+function _temp3() {}
+function _temp2(current) {
+  return current.state === "drawn" ? current : {
+    state: "drawing"
+  };
 }
+function _temp(revision) {
+  return revision + 1;
+}

package/dist/chat/ui/MessageActions.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -12,46 +12,258 @@ import { useChatRow, useChats } from '../../state/chats.js';
 import { ButtonGroup, copyText, IconButton, Tooltip } from '@adecore/ui';
 import { formatClock, formatDateTime, useFormatLocale } from '@adecore/ui/format';
 import { TIMESTAMP_FORMAT } from './timestamp-format.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const COPIED_MS = 1500;
 /* Hidden actions keep their height, so hovering never forces the virtualizer to remeasure. */
-export function MessageActions({ chatId, row }) {
-    const { t } = useTranslation('agent-chat');
-    useFormatLocale();
-    const scope = useChatScope();
-    const host = useChatHost();
-    const { fork } = host;
-    const turnId = row.item.turnId;
-    // Every selector runs on every streamed word of the thread, so each only looks a field up; the work happens in render.
-    const bookmarks = useChatRow(chatId, (chat) => chat?.bookmarks);
-    const info = useChatRow(chatId, (chat) => chat?.info ?? null);
-    const turn = useChatRow(chatId, (chat) => (turnId === null ? undefined : chat?.structure[turnId]));
-    const streaming = useChatRow(chatId, (chat) => {
-        const item = chat?.items[row.id];
-        return item?.kind === 'assistant' && item.streaming;
+export function MessageActions(t0) {
+  const $ = _c(58);
+  const {
+    chatId,
+    row
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  useFormatLocale();
+  const scope = useChatScope();
+  const host = useChatHost();
+  const {
+    fork
+  } = host;
+  const turnId = row.item.turnId;
+  const bookmarks = useChatRow(chatId, _temp);
+  const info = useChatRow(chatId, _temp2);
+  let t1;
+  if ($[0] !== turnId) {
+    t1 = chat_1 => turnId === null ? undefined : chat_1?.structure[turnId];
+    $[0] = turnId;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const turn = useChatRow(chatId, t1);
+  let t2;
+  if ($[2] !== row.id) {
+    t2 = chat_2 => {
+      const item = chat_2?.items[row.id];
+      return item?.kind === "assistant" && item.streaming;
+    };
+    $[2] = row.id;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const streaming = useChatRow(chatId, t2);
+  let t3;
+  if ($[4] !== row.id) {
+    t3 = chat_3 => {
+      const item_0 = chat_3?.items[row.id];
+      return (item_0?.kind === "user" || item_0?.kind === "assistant") && /\S/.test(item_0.text);
+    };
+    $[4] = row.id;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const hasText = useChatRow(chatId, t3);
+  let t4;
+  if ($[6] !== bookmarks || $[7] !== row.id) {
+    t4 = bookmarks?.some(candidate => candidate.itemId === row.id);
+    $[6] = bookmarks;
+    $[7] = row.id;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const bookmarked = t4 === true;
+  let t5;
+  if ($[9] !== info || $[10] !== turn || $[11] !== turnId) {
+    t5 = turnId !== null && forkRefusal(info, turn) === null;
+    $[9] = info;
+    $[10] = turn;
+    $[11] = turnId;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  const canFork = t5;
+  const [copied, setCopied] = useState(false);
+  let t6;
+  let t7;
+  if ($[13] !== copied) {
+    t6 = () => {
+      if (!copied) {
+        return;
+      }
+      const timer = setTimeout(() => setCopied(false), COPIED_MS);
+      return () => clearTimeout(timer);
+    };
+    t7 = [copied];
+    $[13] = copied;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t6 = $[14];
+    t7 = $[15];
+  }
+  useEffect(t6, t7);
+  let t8;
+  if ($[16] !== chatId || $[17] !== row || $[18] !== scope) {
+    t8 = plain => {
+      const item_1 = useChats.getState().byKey[scope.keyOf(chatId)]?.items[row.id];
+      const current = item_1?.kind === row.kind ? {
+        ...row,
+        item: item_1
+      } : row;
+      const text = (plain ? null : markdownOf(current)) ?? messageTextOf(current);
+      if (text !== null) {
+        copyText(text);
+        setCopied(true);
+      }
+    };
+    $[16] = chatId;
+    $[17] = row;
+    $[18] = scope;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  const copy = t8;
+  let t9;
+  if ($[20] !== t) {
+    t9 = t("timeline.actions.label");
+    $[20] = t;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  const t10 = row.kind === "user" && "mt-1.5 justify-end";
+  let t11;
+  if ($[22] !== t10) {
+    t11 = clsx("flex h-7 items-center gap-2 opacity-0 transition-opacity group-has-focus-visible/message:opacity-100 group-hover/message:opacity-100", t10);
+    $[22] = t10;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  let t12;
+  if ($[24] !== bookmarked || $[25] !== canFork || $[26] !== chatId || $[27] !== copied || $[28] !== copy || $[29] !== fork || $[30] !== hasText || $[31] !== host || $[32] !== row.id || $[33] !== scope || $[34] !== streaming || $[35] !== t || $[36] !== turnId) {
+    t12 = !streaming && /*#__PURE__*/_jsxs(ButtonGroup, {
+      render: /*#__PURE__*/_jsx("span", {}),
+      children: [!bookmarked && /*#__PURE__*/_jsx(IconButton, {
+        icon: Bookmark,
+        size: "sm",
+        label: t("bookmarks.add"),
+        onClick: () => void placeBookmark(scope, host, chatId, row.id)
+      }), canFork && turnId !== null && fork !== null && /*#__PURE__*/_jsx(IconButton, {
+        icon: GitFork,
+        size: "sm",
+        label: t("timeline.menu.forkFromHere"),
+        onClick: () => fork(chatId, turnId)
+      }), hasText && /*#__PURE__*/_jsx(IconButton, {
+        icon: copied ? Check : Copy,
+        size: "sm",
+        label: copied ? t("timeline.actions.copied") : t("timeline.menu.copyMessage"),
+        onClick: e => copy(e.shiftKey)
+      })]
     });
-    const hasText = useChatRow(chatId, (chat) => {
-        const item = chat?.items[row.id];
-        return (item?.kind === 'user' || item?.kind === 'assistant') && /\S/.test(item.text);
+    $[24] = bookmarked;
+    $[25] = canFork;
+    $[26] = chatId;
+    $[27] = copied;
+    $[28] = copy;
+    $[29] = fork;
+    $[30] = hasText;
+    $[31] = host;
+    $[32] = row.id;
+    $[33] = scope;
+    $[34] = streaming;
+    $[35] = t;
+    $[36] = turnId;
+    $[37] = t12;
+  } else {
+    t12 = $[37];
+  }
+  let t13;
+  if ($[38] !== row.item.createdAt) {
+    t13 = formatDateTime(row.item.createdAt, TIMESTAMP_FORMAT);
+    $[38] = row.item.createdAt;
+    $[39] = t13;
+  } else {
+    t13 = $[39];
+  }
+  let t14;
+  if ($[40] !== row.item.createdAt) {
+    t14 = new Date(row.item.createdAt).toISOString();
+    $[40] = row.item.createdAt;
+    $[41] = t14;
+  } else {
+    t14 = $[41];
+  }
+  const t15 = row.kind === "assistant" && "order-first";
+  let t16;
+  if ($[42] !== t15) {
+    t16 = clsx("shrink-0 text-xs text-text-faint tabular-nums select-none", t15);
+    $[42] = t15;
+    $[43] = t16;
+  } else {
+    t16 = $[43];
+  }
+  let t17;
+  if ($[44] !== row.item.createdAt) {
+    t17 = formatClock(row.item.createdAt);
+    $[44] = row.item.createdAt;
+    $[45] = t17;
+  } else {
+    t17 = $[45];
+  }
+  let t18;
+  if ($[46] !== t14 || $[47] !== t16 || $[48] !== t17) {
+    t18 = /*#__PURE__*/_jsx("time", {
+      dateTime: t14,
+      className: t16,
+      children: t17
     });
-    const bookmarked = bookmarks?.some((candidate) => candidate.itemId === row.id) === true;
-    const canFork = turnId !== null && forkRefusal(info, turn) === null;
-    const [copied, setCopied] = useState(false);
-    useEffect(() => {
-        if (!copied) {
-            return;
-        }
-        const timer = setTimeout(() => setCopied(false), COPIED_MS);
-        return () => clearTimeout(timer);
-    }, [copied]);
-    // The row was derived from the structure, which a delta leaves alone; the text to copy is the one held now.
-    const copy = (plain) => {
-        const item = useChats.getState().byKey[scope.keyOf(chatId)]?.items[row.id];
-        const current = item?.kind === row.kind ? { ...row, item } : row;
-        const text = (plain ? null : markdownOf(current)) ?? messageTextOf(current);
-        if (text !== null) {
-            copyText(text);
-            setCopied(true);
-        }
-    };
-    return (_jsxs("div", { role: "toolbar", "aria-label": t('timeline.actions.label'), className: clsx('flex h-7 items-center gap-2 opacity-0 transition-opacity group-has-focus-visible/message:opacity-100 group-hover/message:opacity-100', row.kind === 'user' && 'mt-1.5 justify-end'), children: [!streaming && (_jsxs(ButtonGroup, { render: _jsx("span", {}), children: [!bookmarked && (_jsx(IconButton, { icon: Bookmark, size: "sm", label: t('bookmarks.add'), onClick: () => void placeBookmark(scope, host, chatId, row.id) })), canFork && turnId !== null && fork !== null && (_jsx(IconButton, { icon: GitFork, size: "sm", label: t('timeline.menu.forkFromHere'), onClick: () => fork(chatId, turnId) })), hasText && (_jsx(IconButton, { icon: copied ? Check : Copy, size: "sm", label: copied ? t('timeline.actions.copied') : t('timeline.menu.copyMessage'), onClick: (e) => copy(e.shiftKey) }))] })), _jsx(Tooltip, { label: formatDateTime(row.item.createdAt, TIMESTAMP_FORMAT), children: _jsx("time", { dateTime: new Date(row.item.createdAt).toISOString(), className: clsx('shrink-0 text-xs text-text-faint tabular-nums select-none', row.kind === 'assistant' && 'order-first'), children: formatClock(row.item.createdAt) }) })] }));
+    $[46] = t14;
+    $[47] = t16;
+    $[48] = t17;
+    $[49] = t18;
+  } else {
+    t18 = $[49];
+  }
+  let t19;
+  if ($[50] !== t13 || $[51] !== t18) {
+    t19 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t13,
+      children: t18
+    });
+    $[50] = t13;
+    $[51] = t18;
+    $[52] = t19;
+  } else {
+    t19 = $[52];
+  }
+  let t20;
+  if ($[53] !== t11 || $[54] !== t12 || $[55] !== t19 || $[56] !== t9) {
+    t20 = /*#__PURE__*/_jsxs("div", {
+      role: "toolbar",
+      "aria-label": t9,
+      className: t11,
+      children: [t12, t19]
+    });
+    $[53] = t11;
+    $[54] = t12;
+    $[55] = t19;
+    $[56] = t9;
+    $[57] = t20;
+  } else {
+    t20 = $[57];
+  }
+  return t20;
+}
+function _temp2(chat_0) {
+  return chat_0?.info ?? null;
 }
+function _temp(chat) {
+  return chat?.bookmarks;
+}