mirror of
https://github.com/getcompanion-ai/co-mono.git
synced 2026-04-16 15:02:32 +00:00
Improve web-ui message and tool UX
- 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
parent
cac353b3fe
commit
389c80d7a8
6 changed files with 106 additions and 21 deletions
|
|
@ -42,3 +42,26 @@ body {
|
|||
.fixed.inset-0 button[type="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Shimmer animation for thinking text */
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
animation: shimmer 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* User message with fancy pill styling */
|
||||
.user-message-container {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, rgba(217, 79, 0, 0.12), rgba(255, 107, 0, 0.12), rgba(212, 165, 0, 0.12));
|
||||
border: 1px solid rgba(255, 107, 0, 0.25);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export class MessageList extends LitElement {
|
|||
template: html`<assistant-message
|
||||
.message=${amsg}
|
||||
.tools=${this.tools}
|
||||
.isStreaming=${this.isStreaming}
|
||||
.isStreaming=${false}
|
||||
.pendingToolCalls=${this.pendingToolCalls}
|
||||
.toolResultsById=${resultByCallId}
|
||||
.hideToolCalls=${false}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { renderTool } from "../tools/index.js";
|
|||
import type { Attachment } from "../utils/attachment-utils.js";
|
||||
import { formatUsage } from "../utils/format.js";
|
||||
import { i18n } from "../utils/i18n.js";
|
||||
import "./ThinkingBlock.js";
|
||||
|
||||
export type UserMessageWithAttachments = UserMessageType & { attachments?: Attachment[] };
|
||||
|
||||
|
|
@ -62,19 +63,21 @@ export class UserMessage extends LitElement {
|
|||
: this.message.content.find((c) => c.type === "text")?.text || "";
|
||||
|
||||
return html`
|
||||
<div class="py-2 px-4 border-l-4 border-accent-foreground/60 text-primary-foreground">
|
||||
<markdown-block .content=${content}></markdown-block>
|
||||
${
|
||||
this.message.attachments && this.message.attachments.length > 0
|
||||
? html`
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
${this.message.attachments.map(
|
||||
(attachment) => html` <attachment-tile .attachment=${attachment}></attachment-tile> `,
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
<div class="flex justify-start ml-4">
|
||||
<div class="user-message-container py-2 px-4 rounded-xl">
|
||||
<markdown-block .content=${content}></markdown-block>
|
||||
${
|
||||
this.message.attachments && this.message.attachments.length > 0
|
||||
? html`
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
${this.message.attachments.map(
|
||||
(attachment) => html` <attachment-tile .attachment=${attachment}></attachment-tile> `,
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
@ -107,7 +110,9 @@ export class AssistantMessage extends LitElement {
|
|||
if (chunk.type === "text" && chunk.text.trim() !== "") {
|
||||
orderedParts.push(html`<markdown-block .content=${chunk.text}></markdown-block>`);
|
||||
} else if (chunk.type === "thinking" && chunk.thinking.trim() !== "") {
|
||||
orderedParts.push(html` <markdown-block .content=${chunk.thinking} .isThinking=${true}></markdown-block> `);
|
||||
orderedParts.push(
|
||||
html`<thinking-block .content=${chunk.thinking} .isStreaming=${this.isStreaming}></thinking-block>`,
|
||||
);
|
||||
} else if (chunk.type === "toolCall") {
|
||||
if (!this.hideToolCalls) {
|
||||
const tool = this.tools?.find((t) => t.name === chunk.name);
|
||||
|
|
@ -133,7 +138,7 @@ export class AssistantMessage extends LitElement {
|
|||
<div>
|
||||
${orderedParts.length ? html` <div class="px-4 flex flex-col gap-3">${orderedParts}</div> ` : ""}
|
||||
${
|
||||
this.message.usage
|
||||
this.message.usage && !this.isStreaming
|
||||
? this.onCostClick
|
||||
? html` <div class="px-4 mt-2 text-xs text-muted-foreground cursor-pointer hover:text-foreground transition-colors" @click=${this.onCostClick}>${formatUsage(this.message.usage)}</div> `
|
||||
: html` <div class="px-4 mt-2 text-xs text-muted-foreground">${formatUsage(this.message.usage)}</div> `
|
||||
|
|
|
|||
43
packages/web-ui/src/components/ThinkingBlock.ts
Normal file
43
packages/web-ui/src/components/ThinkingBlock.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { icon } from "@mariozechner/mini-lit";
|
||||
import { html, LitElement } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { ChevronRight } from "lucide";
|
||||
|
||||
@customElement("thinking-block")
|
||||
export class ThinkingBlock extends LitElement {
|
||||
@property() content!: string;
|
||||
@property({ type: Boolean }) isStreaming = false;
|
||||
@state() private isExpanded = false;
|
||||
|
||||
protected override createRenderRoot(): HTMLElement | DocumentFragment {
|
||||
return this;
|
||||
}
|
||||
|
||||
override connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.style.display = "block";
|
||||
}
|
||||
|
||||
private toggleExpanded() {
|
||||
this.isExpanded = !this.isExpanded;
|
||||
}
|
||||
|
||||
override render() {
|
||||
const shimmerClasses = this.isStreaming
|
||||
? "animate-shimmer bg-gradient-to-r from-muted-foreground via-foreground to-muted-foreground bg-[length:200%_100%] bg-clip-text text-transparent"
|
||||
: "";
|
||||
|
||||
return html`
|
||||
<div class="thinking-block">
|
||||
<div
|
||||
class="thinking-header cursor-pointer select-none flex items-center gap-2 py-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
@click=${this.toggleExpanded}
|
||||
>
|
||||
<span class="transition-transform inline-block ${this.isExpanded ? "rotate-90" : ""}">${icon(ChevronRight, "sm")}</span>
|
||||
<span class="${shimmerClasses}">Thinking...</span>
|
||||
</div>
|
||||
${this.isExpanded ? html`<markdown-block .content=${this.content} .isThinking=${true}></markdown-block>` : ""}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -46,6 +46,7 @@ export {
|
|||
export { RuntimeMessageBridge } from "./components/sandbox/RuntimeMessageBridge.js";
|
||||
export { RUNTIME_MESSAGE_ROUTER } from "./components/sandbox/RuntimeMessageRouter.js";
|
||||
export type { SandboxRuntimeProvider } from "./components/sandbox/SandboxRuntimeProvider.js";
|
||||
export { ThinkingBlock } from "./components/ThinkingBlock.js";
|
||||
export { ApiKeyPromptDialog } from "./dialogs/ApiKeyPromptDialog.js";
|
||||
export { AttachmentOverlay } from "./dialogs/AttachmentOverlay.js";
|
||||
// Dialogs
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue