getcompanion-ai/co-mono
1
0
Fork 0
mirror of https://github.com/getcompanion-ai/co-mono.git synced 2026-04-19 18:04:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve web-ui message and tool UX

Browse source 
- Add collapsible thinking blocks with shimmer animation during streaming
- Update user messages to use orange gradient pill styling (matching sitegeist)
- Fix cost display to only show for completed messages, not while streaming
- Update tool renderers to use ChevronsUpDown/ChevronUp icons instead of rotating ChevronRight
- Export ThinkingBlock component from public API
This commit is contained in:
Mario Zechner 2025-10-30 20:42:04 +01:00
parent cac353b3fe
commit 389c80d7a8
6 changed files with 106 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

23
packages/web-ui/src/tools/renderer-registry.ts
View file

@ -1,7 +1,7 @@
import { html, icon, type TemplateResult } from "@mariozechner/mini-lit";
import type { Ref } from "lit/directives/ref.js";
import { ref } from "lit/directives/ref.js";
import { ChevronRight, Loader } from "lucide";
import { ChevronsUpDown, ChevronUp, Loader } from "lucide";
import type { ToolRenderer } from "./types.js";
// Registry of tool renderers
@ -85,11 +85,23 @@ export function renderCollapsibleHeader(
if (isCollapsed) {
content.classList.remove("max-h-0");
content.classList.add("max-h-[2000px]", "mt-3");
chevron.classList.add("rotate-90");
// Show ChevronUp, hide ChevronsUpDown
const upIcon = chevron.querySelector(".chevron-up");
const downIcon = chevron.querySelector(".chevrons-up-down");
if (upIcon && downIcon) {
upIcon.classList.remove("hidden");
downIcon.classList.add("hidden");
}
} else {
content.classList.remove("max-h-[2000px]", "mt-3");
content.classList.add("max-h-0");
chevron.classList.remove("rotate-90");
// Show ChevronsUpDown, hide ChevronUp
const upIcon = chevron.querySelector(".chevron-up");
const downIcon = chevron.querySelector(".chevrons-up-down");
if (upIcon && downIcon) {
upIcon.classList.add("hidden");
downIcon.classList.remove("hidden");
}
}
}
};
@ -108,8 +120,9 @@ export function renderCollapsibleHeader(
${statusIcon(toolIcon, toolIconColor)}
${text}
</div>
<span class="inline-block text-muted-foreground transition-transform duration-300 ${defaultExpanded ? "rotate-90" : ""}" ${ref(chevronRef)}>
${icon(ChevronRight, "sm")}
<span class="inline-block text-muted-foreground" ${ref(chevronRef)}>
<span class="chevron-up ${defaultExpanded ? "" : "hidden"}">${icon(ChevronUp, "sm")}</span>
<span class="chevrons-up-down ${defaultExpanded ? "hidden" : ""}">${icon(ChevronsUpDown, "sm")}</span>
</span>
</button>
`;