zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace nuxt icons with unocss icons

Browse Source
This commit is contained in:
Zoe
2026-02-26 14:51:07 -06:00
parent 3ff0bcce19
commit 97afa1cbe1
30 changed files with 107 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Message/Agent/Reasoning.vue
+3 -2
View File
@@ -59,11 +59,12 @@ const toggleReasoning = async () => {
<span class="flex items-center gap-1">
<span
class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center">
<Icon name="mynaui:atom" class="w-3 h-3 text-[var(--reasoning-accent)]" />
<span class="i-mynaui-atom text-2.5 text-[var(--reasoning-accent)]"></span>
</span>
Deep Thinking
</span>
<Icon name="mynaui:chevron-down" :class="['w-4 h-4', reasoningOpen ? '' : '-rotate-90']" />
<span class="i-mynaui-chevron-down w-4 h-4 text-[var(--text-secondary)]"
:class="reasoningOpen ? '' : '-rotate-90'"></span>
</button>
<div v-if="reasoningOpen" ref="containerRef" @scroll="handleScroll"
:class="['reasoning-contaizner max-h-[min(40vh,320px)] overflow-y-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]', scrollState]">
app/components/Message/Agent/Tool/Debug.vue
+4 -4
View File
@@ -117,7 +117,7 @@ watch(
]">
<div
class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden flex items-center justify-center">
<Icon name="mynaui:code" class="w-4.5 h-4.5" />
<span class="i-mynaui-code w-4.5 h-4.5"></span>
</div>
Input
</button>
@@ -128,7 +128,7 @@ watch(
]">
<div
class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden flex items-center justify-center">
<Icon name="mynaui:arrow-down-square" class="w-4.5 h-4.5" />
<span class="i-mynaui-arrow-down-square w-4.5 h-4.5"></span>
</div>
Output
</button>
@@ -138,7 +138,7 @@ watch(
]">
<div
class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden flex items-center justify-center">
<Icon name="mynaui:danger-triangle" class="w-4.5 h-4.5" />
<span class="i-mynaui-danger-triangle w-4.5 h-4.5"></span>
</div>
Error
</button>
@@ -148,7 +148,7 @@ watch(
]">
<div
class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden flex items-center justify-center">
<Icon name="mynaui:flask" class="w-4.5 h-4.5" />
<span class="i-mynaui-flask w-4.5 h-4.5"></span>
</div>
Function call
</button>
app/components/Message/Agent/Tool/index.vue
+6 -7
View File
@@ -22,12 +22,11 @@ const toggleDebugToolCall = () => {
<div class="flex items-center gap-1">
<div
class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center">
<!-- Explicityly avoid setting the name via a reactive value, otherwise you risk corrupting the icon with that name globally -->
<Icon v-if="toolCall.status === 'pending'" name="svg-spinners:180-ring-with-bg"
class="w-3 h-3 text-[var(--text-secondary)]" />
<Icon v-else-if="toolCall.status === 'failed'" name="mynaui:x-solid"
class="w-3 h-3 text-[#ff3b3b]" />
<Icon v-else name="mynaui:tool" class="w-3 h-3 text-[var(--text-secondary)]" />
<span class="w-3 h-3" :class="{
'i-svg-spinners-180-ring-with-bg': toolCall.status === 'pending',
'i-mynaui-x-solid text-[#ff3b3b]': toolCall.status === 'failed',
'i-mynaui-tool': toolCall.status !== 'pending' && toolCall.status !== 'failed',
}"></span>
</div>
{{ toolCall.toolName }}
</div>
@@ -36,7 +35,7 @@ const toggleDebugToolCall = () => {
class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<button @click="toggleDebugToolCall"
class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden hover:bg-[var(--color-hover)] flex items-center justify-center transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<Icon name="mynaui:search" class="w-3 h-3 text-[var(--text-secondary)]" />
<span class="i-mynaui-search w-3 h-3 text-[var(--text-secondary)]"></span>
</button>
</div>
</div>
app/components/Message/Agent/index.vue
+2 -2
View File
@@ -23,7 +23,7 @@ defineProps<{
<span class="flex items-center gap-1"
v-if="message.generation?.status === 'pending' && (message.parts || []).length === 0">
<Icon name="svg-spinners:pulse-2" class="text-4" />
<span class="i-svg-spinners-pulse-2 text-4"></span>
<span class="text-sm text-[var(--text-secondary)]">
Preparing generating...
</span>
@@ -42,7 +42,7 @@ defineProps<{
<div class="flex gap-2">
<span class="flex gap-1 items-center" v-if="message.generation.tokens?.output">
<Icon name="tabler:coins" />
<span class="i-tabler-coins"></span>
{{ message.generation?.tokens?.output }}
</span>
app/components/Message/index.vue
+8 -7
View File
@@ -139,14 +139,15 @@ const messageCount = computed(() => {
<div>
<div v-if="messageCount > 1" class="flex gap-1">
<button :inert="focusedIndex === 0" @click="focusedIndex = focusedIndex! - 1">
<Icon name="mynaui:chevron-left" :class="['w-4 h-4', focusedIndex === 0 ? 'opacity-0' : '']" />
<span class="i-mynaui-chevron-left w-4 h-4 text-[var(--text-secondary)]"
:class="focusedIndex === 0 ? 'opacity-0' : ''"></span>
</button>
<span class="text-xs text-[var(--text-secondary)]">
{{ focusedIndex + 1 }} / {{ messageCount }}
</span>
<button :inert="focusedIndex + 1 === messageCount" @click="focusedIndex = focusedIndex + 1">
<Icon name="mynaui:chevron-right"
:class="['w-4 h-4', focusedIndex + 1 === messageCount ? 'opacity-0' : '']" />
<span class="i-mynaui-chevron-right w-4 h-4 text-[var(--text-secondary)]"
:class="focusedIndex + 1 === messageCount ? 'opacity-0' : ''"></span>
</button>
</div>
</div>
@@ -155,19 +156,19 @@ const messageCount = computed(() => {
class="self-end mt-1 w-fit bg-[var(--bg-container)] text-[var(--text-secondary)] gap-px flex items-center rounded-md overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<button @click="regenerateMessage"
class="flex justify-center items-center w-7 h-6 hover:bg-[var(--color-hover)]">
<Icon name="mynaui:refresh" class="text-4.5" />
<span class="i-mynaui-refresh text-4.5"></span>
</button>
<button v-if="message.role === 'user'" @click="handleEdit"
class="flex justify-center items-center w-7 h-6 hover:bg-[var(--color-hover)]">
<Icon name="mynaui:pencil" class="text-4.5" />
<span class="i-mynaui-pencil text-4.5"></span>
</button>
<button @click="copyMessage" :class="{ 'text-emerald-500': copied }"
class="flex justify-center items-center w-7 h-6 hover:bg-[var(--color-hover)]">
<Icon :name="copied ? 'mynaui:check' : 'mynaui:copy'" class="text-4.5" />
<span :class="copied ? 'i-mynaui-check text-emerald-500' : 'i-mynaui-copy text-4.5'"></span>
</button>
<button @click="deleteMessage"
class="flex justify-center items-center w-7 h-6 text-red-500 hover:bg-[var(--color-hover)]">
<Icon name="mynaui:trash" class="text-5" />
<span class="i-mynaui-trash text-5"></span>
</button>
</div>
</div>