mirror of
https://github.com/andy-stack/vaultkeeper-ai.git
synced 2026-07-22 06:42:03 +00:00
82e58b52e7
Replace separate editModeActive and planningModeActive boolean flags with a single ChatMode enum (ReadOnly, Edit, Planning). Add ChatModeSelector component for mode switching. Update all components to use chatMode instead of individual flags. Refactor MainAgent and ChatService to accept ChatMode parameter. Remove edit-mode styling variants throughout UI components. Update system prompt to document user reference system. Consolidate input button styling with shared input-button-highlight class.
80 lines
No EOL
1.9 KiB
Svelte
80 lines
No EOL
1.9 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;
|
|
|
|
$: 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/> {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> |