openclaw-multi-auto 1.3.6 → 1.3.8

package/ui/src/ui/chat/copy-as-markdown.ts

@@ -0,0 +1,97 @@
+import { html, type TemplateResult } from "lit";
+import { icons } from "../icons.ts";
+
+const COPIED_FOR_MS = 1500;
+const ERROR_FOR_MS = 2000;
+const COPY_LABEL = "Copy as markdown";
+const COPIED_LABEL = "Copied";
+const ERROR_LABEL = "Copy failed";
+
+type CopyButtonOptions = {
+  text: () => string;
+  label?: string;
+};
+
+async function copyTextToClipboard(text: string): Promise<boolean> {
+  if (!text) {
+    return false;
+  }
+
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function setButtonLabel(button: HTMLButtonElement, label: string) {
+  button.title = label;
+  button.setAttribute("aria-label", label);
+}
+
+function createCopyButton(options: CopyButtonOptions): TemplateResult {
+  const idleLabel = options.label ?? COPY_LABEL;
+  return html`
+    <button
+      class="chat-copy-btn"
+      type="button"
+      title=${idleLabel}
+      aria-label=${idleLabel}
+      @click=${async (e: Event) => {
+        const btn = e.currentTarget as HTMLButtonElement | null;
+
+        if (!btn || btn.dataset.copying === "1") {
+          return;
+        }
+
+        btn.dataset.copying = "1";
+        btn.setAttribute("aria-busy", "true");
+        btn.disabled = true;
+
+        const copied = await copyTextToClipboard(options.text());
+        if (!btn.isConnected) {
+          return;
+        }
+
+        delete btn.dataset.copying;
+        btn.removeAttribute("aria-busy");
+        btn.disabled = false;
+
+        if (!copied) {
+          btn.dataset.error = "1";
+          setButtonLabel(btn, ERROR_LABEL);
+
+          window.setTimeout(() => {
+            if (!btn.isConnected) {
+              return;
+            }
+            delete btn.dataset.error;
+            setButtonLabel(btn, idleLabel);
+          }, ERROR_FOR_MS);
+          return;
+        }
+
+        btn.dataset.copied = "1";
+        setButtonLabel(btn, COPIED_LABEL);
+
+        window.setTimeout(() => {
+          if (!btn.isConnected) {
+            return;
+          }
+          delete btn.dataset.copied;
+          setButtonLabel(btn, idleLabel);
+        }, COPIED_FOR_MS);
+      }}
+    >
+      <span class="chat-copy-btn__icon" aria-hidden="true">
+        <span class="chat-copy-btn__icon-copy">${icons.copy}</span>
+        <span class="chat-copy-btn__icon-check">${icons.check}</span>
+      </span>
+    </button>
+  `;
+}
+
+export function renderCopyAsMarkdownButton(markdown: string): TemplateResult {
+  return createCopyButton({ text: () => markdown, label: COPY_LABEL });
+}

package/ui/src/ui/chat/grouped-render.ts

@@ -0,0 +1,287 @@
+import { html, nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import type { AssistantIdentity } from "../assistant-identity.ts";
+import { toSanitizedMarkdownHtml } from "../markdown.ts";
+import { openExternalUrlSafe } from "../open-external-url.ts";
+import { detectTextDirection } from "../text-direction.ts";
+import type { MessageGroup } from "../types/chat-types.ts";
+import { renderCopyAsMarkdownButton } from "./copy-as-markdown.ts";
+import {
+  extractTextCached,
+  extractThinkingCached,
+  formatReasoningMarkdown,
+} from "./message-extract.ts";
+import { isToolResultMessage, normalizeRoleForGrouping } from "./message-normalizer.ts";
+import { extractToolCards, renderToolCardSidebar } from "./tool-cards.ts";
+
+type ImageBlock = {
+  url: string;
+  alt?: string;
+};
+
+function extractImages(message: unknown): ImageBlock[] {
+  const m = message as Record<string, unknown>;
+  const content = m.content;
+  const images: ImageBlock[] = [];
+
+  if (Array.isArray(content)) {
+    for (const block of content) {
+      if (typeof block !== "object" || block === null) {
+        continue;
+      }
+      const b = block as Record<string, unknown>;
+
+      if (b.type === "image") {
+        // Handle source object format (from sendChatMessage)
+        const source = b.source as Record<string, unknown> | undefined;
+        if (source?.type === "base64" && typeof source.data === "string") {
+          const data = source.data;
+          const mediaType = (source.media_type as string) || "image/png";
+          // If data is already a data URL, use it directly
+          const url = data.startsWith("data:") ? data : `data:${mediaType};base64,${data}`;
+          images.push({ url });
+        } else if (typeof b.url === "string") {
+          images.push({ url: b.url });
+        }
+      } else if (b.type === "image_url") {
+        // OpenAI format
+        const imageUrl = b.image_url as Record<string, unknown> | undefined;
+        if (typeof imageUrl?.url === "string") {
+          images.push({ url: imageUrl.url });
+        }
+      }
+    }
+  }
+
+  return images;
+}
+
+export function renderReadingIndicatorGroup(assistant?: AssistantIdentity) {
+  return html`
+    <div class="chat-group assistant">
+      ${renderAvatar("assistant", assistant)}
+      <div class="chat-group-messages">
+        <div class="chat-bubble chat-reading-indicator" aria-hidden="true">
+          <span class="chat-reading-indicator__dots">
+            <span></span><span></span><span></span>
+          </span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export function renderStreamingGroup(
+  text: string,
+  startedAt: number,
+  onOpenSidebar?: (content: string) => void,
+  assistant?: AssistantIdentity,
+) {
+  const timestamp = new Date(startedAt).toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  const name = assistant?.name ?? "Assistant";
+
+  return html`
+    <div class="chat-group assistant">
+      ${renderAvatar("assistant", assistant)}
+      <div class="chat-group-messages">
+        ${renderGroupedMessage(
+          {
+            role: "assistant",
+            content: [{ type: "text", text }],
+            timestamp: startedAt,
+          },
+          { isStreaming: true, showReasoning: false },
+          onOpenSidebar,
+        )}
+        <div class="chat-group-footer">
+          <span class="chat-sender-name">${name}</span>
+          <span class="chat-group-timestamp">${timestamp}</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export function renderMessageGroup(
+  group: MessageGroup,
+  opts: {
+    onOpenSidebar?: (content: string) => void;
+    showReasoning: boolean;
+    assistantName?: string;
+    assistantAvatar?: string | null;
+  },
+) {
+  const normalizedRole = normalizeRoleForGrouping(group.role);
+  const assistantName = opts.assistantName ?? "Assistant";
+  const who =
+    normalizedRole === "user"
+      ? "You"
+      : normalizedRole === "assistant"
+        ? assistantName
+        : normalizedRole;
+  const roleClass =
+    normalizedRole === "user" ? "user" : normalizedRole === "assistant" ? "assistant" : "other";
+  const timestamp = new Date(group.timestamp).toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+
+  return html`
+    <div class="chat-group ${roleClass}">
+      ${renderAvatar(group.role, {
+        name: assistantName,
+        avatar: opts.assistantAvatar ?? null,
+      })}
+      <div class="chat-group-messages">
+        ${group.messages.map((item, index) =>
+          renderGroupedMessage(
+            item.message,
+            {
+              isStreaming: group.isStreaming && index === group.messages.length - 1,
+              showReasoning: opts.showReasoning,
+            },
+            opts.onOpenSidebar,
+          ),
+        )}
+        <div class="chat-group-footer">
+          <span class="chat-sender-name">${who}</span>
+          <span class="chat-group-timestamp">${timestamp}</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderAvatar(role: string, assistant?: Pick<AssistantIdentity, "name" | "avatar">) {
+  const normalized = normalizeRoleForGrouping(role);
+  const assistantName = assistant?.name?.trim() || "Assistant";
+  const assistantAvatar = assistant?.avatar?.trim() || "";
+  const initial =
+    normalized === "user"
+      ? "U"
+      : normalized === "assistant"
+        ? assistantName.charAt(0).toUpperCase() || "A"
+        : normalized === "tool"
+          ? "⚙"
+          : "?";
+  const className =
+    normalized === "user"
+      ? "user"
+      : normalized === "assistant"
+        ? "assistant"
+        : normalized === "tool"
+          ? "tool"
+          : "other";
+
+  if (assistantAvatar && normalized === "assistant") {
+    if (isAvatarUrl(assistantAvatar)) {
+      return html`<img
+        class="chat-avatar ${className}"
+        src="${assistantAvatar}"
+        alt="${assistantName}"
+      />`;
+    }
+    return html`<div class="chat-avatar ${className}">${assistantAvatar}</div>`;
+  }
+
+  return html`<div class="chat-avatar ${className}">${initial}</div>`;
+}
+
+function isAvatarUrl(value: string): boolean {
+  return (
+    /^https?:\/\//i.test(value) || /^data:image\//i.test(value) || value.startsWith("/") // Relative paths from avatar endpoint
+  );
+}
+
+function renderMessageImages(images: ImageBlock[]) {
+  if (images.length === 0) {
+    return nothing;
+  }
+
+  const openImage = (url: string) => {
+    openExternalUrlSafe(url, { allowDataImage: true });
+  };
+
+  return html`
+    <div class="chat-message-images">
+      ${images.map(
+        (img) => html`
+          <img
+            src=${img.url}
+            alt=${img.alt ?? "Attached image"}
+            class="chat-message-image"
+            @click=${() => openImage(img.url)}
+          />
+        `,
+      )}
+    </div>
+  `;
+}
+
+function renderGroupedMessage(
+  message: unknown,
+  opts: { isStreaming: boolean; showReasoning: boolean },
+  onOpenSidebar?: (content: string) => void,
+) {
+  const m = message as Record<string, unknown>;
+  const role = typeof m.role === "string" ? m.role : "unknown";
+  const isToolResult =
+    isToolResultMessage(message) ||
+    role.toLowerCase() === "toolresult" ||
+    role.toLowerCase() === "tool_result" ||
+    typeof m.toolCallId === "string" ||
+    typeof m.tool_call_id === "string";
+
+  const toolCards = extractToolCards(message);
+  const hasToolCards = toolCards.length > 0;
+  const images = extractImages(message);
+  const hasImages = images.length > 0;
+
+  const extractedText = extractTextCached(message);
+  const extractedThinking =
+    opts.showReasoning && role === "assistant" ? extractThinkingCached(message) : null;
+  const markdownBase = extractedText?.trim() ? extractedText : null;
+  const reasoningMarkdown = extractedThinking ? formatReasoningMarkdown(extractedThinking) : null;
+  const markdown = markdownBase;
+  const canCopyMarkdown = role === "assistant" && Boolean(markdown?.trim());
+
+  const bubbleClasses = [
+    "chat-bubble",
+    canCopyMarkdown ? "has-copy" : "",
+    opts.isStreaming ? "streaming" : "",
+    "fade-in",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  if (!markdown && hasToolCards && isToolResult) {
+    return html`${toolCards.map((card) => renderToolCardSidebar(card, onOpenSidebar))}`;
+  }
+
+  if (!markdown && !hasToolCards && !hasImages) {
+    return nothing;
+  }
+
+  return html`
+    <div class="${bubbleClasses}">
+      ${canCopyMarkdown ? renderCopyAsMarkdownButton(markdown!) : nothing}
+      ${renderMessageImages(images)}
+      ${
+        reasoningMarkdown
+          ? html`<div class="chat-thinking">${unsafeHTML(
+              toSanitizedMarkdownHtml(reasoningMarkdown),
+            )}</div>`
+          : nothing
+      }
+      ${
+        markdown
+          ? html`<div class="chat-text" dir="${detectTextDirection(markdown)}">${unsafeHTML(toSanitizedMarkdownHtml(markdown))}</div>`
+          : nothing
+      }
+      ${toolCards.map((card) => renderToolCardSidebar(card, onOpenSidebar))}
+    </div>
+  `;
+}

package/ui/src/ui/chat/message-extract.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import {
+  extractText,
+  extractTextCached,
+  extractThinking,
+  extractThinkingCached,
+} from "./message-extract.ts";
+
+describe("extractTextCached", () => {
+  it("matches extractText output", () => {
+    const message = {
+      role: "assistant",
+      content: [{ type: "text", text: "Hello there" }],
+    };
+    expect(extractTextCached(message)).toBe(extractText(message));
+  });
+
+  it("returns consistent output for repeated calls", () => {
+    const message = {
+      role: "user",
+      content: "plain text",
+    };
+    expect(extractTextCached(message)).toBe("plain text");
+    expect(extractTextCached(message)).toBe("plain text");
+  });
+
+  it("strips assistant relevant-memories scaffolding", () => {
+    const message = {
+      role: "assistant",
+      content: [
+        {
+          type: "text",
+          text: [
+            "<relevant-memories>",
+            "Internal memory context",
+            "</relevant-memories>",
+            "Final user answer",
+          ].join("\n"),
+        },
+      ],
+    };
+    expect(extractText(message)).toBe("Final user answer");
+    expect(extractTextCached(message)).toBe("Final user answer");
+  });
+});
+
+describe("extractThinkingCached", () => {
+  it("matches extractThinking output", () => {
+    const message = {
+      role: "assistant",
+      content: [{ type: "thinking", thinking: "Plan A" }],
+    };
+    expect(extractThinkingCached(message)).toBe(extractThinking(message));
+  });
+
+  it("returns consistent output for repeated calls", () => {
+    const message = {
+      role: "assistant",
+      content: [{ type: "thinking", thinking: "Plan A" }],
+    };
+    expect(extractThinkingCached(message)).toBe("Plan A");
+    expect(extractThinkingCached(message)).toBe("Plan A");
+  });
+});

package/ui/src/ui/chat/message-extract.ts

@@ -0,0 +1,122 @@
+import { stripInboundMetadata } from "../../../../src/auto-reply/reply/strip-inbound-meta.js";
+import { stripEnvelope } from "../../../../src/shared/chat-envelope.js";
+import { stripThinkingTags } from "../format.ts";
+
+const textCache = new WeakMap<object, string | null>();
+const thinkingCache = new WeakMap<object, string | null>();
+
+function processMessageText(text: string, role: string): string {
+  const shouldStripInboundMetadata = role.toLowerCase() === "user";
+  if (role === "assistant") {
+    return stripThinkingTags(text);
+  }
+  return shouldStripInboundMetadata
+    ? stripInboundMetadata(stripEnvelope(text))
+    : stripEnvelope(text);
+}
+
+export function extractText(message: unknown): string | null {
+  const m = message as Record<string, unknown>;
+  const role = typeof m.role === "string" ? m.role : "";
+  const raw = extractRawText(message);
+  if (!raw) {
+    return null;
+  }
+  return processMessageText(raw, role);
+}
+
+export function extractTextCached(message: unknown): string | null {
+  if (!message || typeof message !== "object") {
+    return extractText(message);
+  }
+  const obj = message;
+  if (textCache.has(obj)) {
+    return textCache.get(obj) ?? null;
+  }
+  const value = extractText(message);
+  textCache.set(obj, value);
+  return value;
+}
+
+export function extractThinking(message: unknown): string | null {
+  const m = message as Record<string, unknown>;
+  const content = m.content;
+  const parts: string[] = [];
+  if (Array.isArray(content)) {
+    for (const p of content) {
+      const item = p as Record<string, unknown>;
+      if (item.type === "thinking" && typeof item.thinking === "string") {
+        const cleaned = item.thinking.trim();
+        if (cleaned) {
+          parts.push(cleaned);
+        }
+      }
+    }
+  }
+  if (parts.length > 0) {
+    return parts.join("\n");
+  }
+
+  // Back-compat: older logs may still have <think> tags inside text blocks.
+  const rawText = extractRawText(message);
+  if (!rawText) {
+    return null;
+  }
+  const matches = [
+    ...rawText.matchAll(/<\s*think(?:ing)?\s*>([\s\S]*?)<\s*\/\s*think(?:ing)?\s*>/gi),
+  ];
+  const extracted = matches.map((m) => (m[1] ?? "").trim()).filter(Boolean);
+  return extracted.length > 0 ? extracted.join("\n") : null;
+}
+
+export function extractThinkingCached(message: unknown): string | null {
+  if (!message || typeof message !== "object") {
+    return extractThinking(message);
+  }
+  const obj = message;
+  if (thinkingCache.has(obj)) {
+    return thinkingCache.get(obj) ?? null;
+  }
+  const value = extractThinking(message);
+  thinkingCache.set(obj, value);
+  return value;
+}
+
+export function extractRawText(message: unknown): string | null {
+  const m = message as Record<string, unknown>;
+  const content = m.content;
+  if (typeof content === "string") {
+    return content;
+  }
+  if (Array.isArray(content)) {
+    const parts = content
+      .map((p) => {
+        const item = p as Record<string, unknown>;
+        if (item.type === "text" && typeof item.text === "string") {
+          return item.text;
+        }
+        return null;
+      })
+      .filter((v): v is string => typeof v === "string");
+    if (parts.length > 0) {
+      return parts.join("\n");
+    }
+  }
+  if (typeof m.text === "string") {
+    return m.text;
+  }
+  return null;
+}
+
+export function formatReasoningMarkdown(text: string): string {
+  const trimmed = text.trim();
+  if (!trimmed) {
+    return "";
+  }
+  const lines = trimmed
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line) => `_${line}_`);
+  return lines.length ? ["_Reasoning:_", ...lines].join("\n") : "";
+}