mirror of
https://github.com/andy-stack/vaultkeeper-ai.git
synced 2026-07-22 06:42:03 +00:00
581c7f1686
Update Spinner and ThoughtIndicator components to use --background-primary instead of --background-secondary and --background-primary-alt for visual consistency across the UI.
82 lines
No EOL
2 KiB
Svelte
82 lines
No EOL
2 KiB
Svelte
<script lang="ts">
|
|
import { fade } from "svelte/transition";
|
|
import Spinner from "./Spinner.svelte";
|
|
|
|
export let thought: string | null = null;
|
|
export let thoughtIndicatorElement: HTMLElement | undefined = undefined;
|
|
export let editModeActive : boolean = false;
|
|
|
|
$: isVisible = thought !== null && thought.trim().length > 0;
|
|
|
|
</script>
|
|
|
|
{#if isVisible}
|
|
<div class="ai-thought-container" in:fade={{ duration: 200 }} out:fade={{ duration: 200 }} bind:this={thoughtIndicatorElement}>
|
|
<div class="ai-thought-bubble">
|
|
<span><Spinner {editModeActive}/> {thought}</span>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.ai-thought-container {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.ai-thought-bubble {
|
|
--border-width: 1px;
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.ai-thought-bubble span {
|
|
position: relative;
|
|
z-index: 1;
|
|
background: var(--background-primary);
|
|
border-radius: 10px;
|
|
padding: 0.55rem 0.7rem;
|
|
font-size: var(--font-smallest);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
word-wrap: break-word;
|
|
width: 100%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ai-thought-bubble::after {
|
|
position: absolute;
|
|
content: "";
|
|
top: calc(-1 * var(--border-width));
|
|
left: calc(-1 * var(--border-width));
|
|
z-index: 0;
|
|
width: calc(100% + var(--border-width) * 2);
|
|
height: calc(100% + var(--border-width) * 2);
|
|
background: linear-gradient(
|
|
60deg,
|
|
hsl(224, 85%, 66%),
|
|
hsl(269, 85%, 66%),
|
|
hsl(314, 85%, 66%),
|
|
hsl(359, 85%, 66%),
|
|
hsl(44, 85%, 66%),
|
|
hsl(89, 85%, 66%),
|
|
hsl(134, 85%, 66%),
|
|
hsl(179, 85%, 66%)
|
|
);
|
|
background-size: 300% 300%;
|
|
background-position: 0 50%;
|
|
border-radius: 10px;
|
|
animation: moveGradient 3s alternate infinite;
|
|
}
|
|
|
|
@keyframes moveGradient {
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
</style> |