generated from nhcarrigan/template
hikari
fa906684c2
## Summary - **fix**: `show_thinking_blocks` setting now persists across sessions — it was defined on the TypeScript side but missing from the Rust `HikariConfig` struct, so serde silently dropped it on every save/load - **feat**: Tool calls are now rendered as collapsible blocks matching the Extended Thinking block aesthetic, replacing the old inline dropdown approach - **feat**: Add configurable max output tokens setting - **feat**: Use random creative names for conversation tabs - **test**: Significantly expanded frontend unit test coverage - **docs**: Require tests for all changes in CLAUDE.md - **feat**: Allow users to specify a custom terminal font (Closes #176) - **feat**: Display friendly names for memory files derived from the first heading (Closes #177) - **feat**: Add custom UI font support for the app chrome (buttons, labels, tabs) - **fix**: Apply custom UI font to the full app interface — `.app-container` was hardcoded, blocking inheritance from `body`; also renamed "Custom Font" to "Custom Terminal Font" for clarity ✨ This PR was created with help from Hikari~ 🌸 Reviewed-on: #175 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
142 lines
2.9 KiB
Svelte
142 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
toolName: string | null;
|
|
content: string;
|
|
timestamp: Date;
|
|
}
|
|
|
|
let { toolName, content, timestamp }: Props = $props();
|
|
let isExpanded = $state(false);
|
|
|
|
function toggleExpanded() {
|
|
isExpanded = !isExpanded;
|
|
}
|
|
|
|
function formatTime(date: Date): string {
|
|
return date.toLocaleTimeString("en-US", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<div class="tool-block">
|
|
<button class="tool-header" onclick={toggleExpanded} type="button">
|
|
<span class="tool-timestamp">{formatTime(timestamp)}</span>
|
|
<svg
|
|
class="tool-icon"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
width="16"
|
|
height="16"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
|
|
/>
|
|
</svg>
|
|
{#if toolName}
|
|
<span class="tool-name">[{toolName}]</span>
|
|
{/if}
|
|
<span class="tool-label">{content}</span>
|
|
<svg
|
|
class="chevron"
|
|
class:expanded={isExpanded}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{#if isExpanded}
|
|
<div class="tool-content">
|
|
{content}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.tool-block {
|
|
margin-bottom: 0.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.375rem;
|
|
background: var(--bg-secondary);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.tool-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: var(--terminal-tool, #c084fc);
|
|
font-size: 0.875rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tool-header:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.tool-timestamp {
|
|
font-family: monospace;
|
|
font-size: 0.75rem;
|
|
opacity: 0.7;
|
|
color: var(--text-secondary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tool-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tool-name {
|
|
font-family: monospace;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
color: var(--terminal-tool-name, #ddd6fe);
|
|
}
|
|
|
|
.tool-label {
|
|
flex: 1;
|
|
text-align: left;
|
|
font-style: italic;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.chevron {
|
|
flex-shrink: 0;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.chevron.expanded {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.tool-content {
|
|
padding: 0.75rem;
|
|
border-top: 1px solid var(--border-color);
|
|
color: var(--terminal-tool, #c084fc);
|
|
font-family: monospace;
|
|
font-size: 0.875rem;
|
|
font-style: italic;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
</style>
|