Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-09-01 04:47:40 +02:00
Code Issues Packages Projects Releases Activity

chore(llm): redesign thinking card

Browse Source
This commit is contained in:
Elian Doran
2026-04-04 09:15:40 +03:00
parent 186b784004
commit 7543109583
2 changed files with 20 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.css
View File

@@ -16,7 +16,7 @@
}
.llm-chat-message-wrapper-assistant {
margin-right: auto;
width: 100%;
}
/* Show footer only on hover */
@@ -136,46 +136,20 @@
color: var(--danger-text-color, #c00);
}
/* Thinking message (collapsible) */
.llm-chat-message-thinking {
background: var(--accented-background-color);
border: 1px dashed var(--main-border-color);
cursor: pointer;
.llm-chat-thinking-card.expandable-card {
width: 100%;
max-width: 100%;
border-style: dashed;
margin-right: 0;
margin: 0;
}
.llm-chat-thinking-summary {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 500;
.llm-chat-thinking-card .expandable-section-summary {
color: var(--muted-text-color);
padding: 0.25rem 0;
list-style: none;
}
.llm-chat-thinking-summary::-webkit-details-marker {
display: none;
}
.llm-chat-thinking-summary::before {
content: "▶";
font-size: 0.7em;
transition: transform 0.2s ease;
}
.llm-chat-message-thinking[open] .llm-chat-thinking-summary::before {
transform: rotate(90deg);
}
.llm-chat-thinking-summary .bx {
font-size: 1rem;
}
.llm-chat-thinking-content {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--main-border-color);
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
color: var(--muted-text-color);
white-space: pre-wrap;

22
apps/client/src/widgets/type_widgets/llm_chat/ChatMessage.tsx
View File

@@ -117,19 +117,19 @@ export default function ChatMessage({ message, isStreaming }: Props) {
isThinking && "llm-chat-message-thinking"
].filter(Boolean).join(" ");
// Render thinking messages in a collapsible details element
// Render thinking messages in a collapsible card
if (isThinking) {
return (
<details className={messageClasses}>
<summary className="llm-chat-thinking-summary">
<span className="bx bx-brain" />
{t("llm_chat.thought_process")}
</summary>
<div className="llm-chat-message-content llm-chat-thinking-content">
{textContent}
{isStreaming && <span className="llm-chat-cursor" />}
</div>
</details>
<div className="llm-chat-message-wrapper llm-chat-message-wrapper-assistant">
<ExpandableCard className="llm-chat-thinking-card">
<ExpandableSection icon="bx bx-brain" label={t("llm_chat.thought_process")}>
<div className="llm-chat-thinking-content">
{textContent}
{isStreaming && <span className="llm-chat-cursor" />}
</div>
</ExpandableSection>
</ExpandableCard>
</div>
);
}