fix(shadcn): isolate Nexus CSS vars with --nx- prefix + admin password reset endpoint
This commit is contained in:
@@ -361,7 +361,7 @@ async function sendMessage() {
|
||||
opacity: 1;
|
||||
}
|
||||
.task-edit-btn:hover {
|
||||
color: var(--accent);
|
||||
color: var(--nx-accent);
|
||||
}
|
||||
.task-delete-btn {
|
||||
background: none;
|
||||
@@ -411,7 +411,7 @@ async function sendMessage() {
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: var(--accent);
|
||||
background: var(--nx-accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
@@ -499,7 +499,7 @@ async function sendMessage() {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.settings-redirect a {
|
||||
color: var(--accent);
|
||||
color: var(--nx-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
.settings-redirect a:hover {
|
||||
|
||||
@@ -1,15 +1,84 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { X, ExternalLink } from '@lucide/vue'
|
||||
import type { AgentNodeData } from '../../composables/useDashboardData'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import Badge from '@/components/ui/Badge.vue'
|
||||
import Select from '@/components/ui/Select.vue'
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
agent: AgentNodeData
|
||||
runtime: string
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
interface ModelOption {
|
||||
id: string
|
||||
name: string
|
||||
provider: string
|
||||
}
|
||||
|
||||
const availableModels = ref<ModelOption[]>([])
|
||||
const selectedModel = ref('')
|
||||
const currentModel = ref('')
|
||||
const saving = ref(false)
|
||||
|
||||
async function loadModels() {
|
||||
try {
|
||||
const res = await fetch('/api/dashboard/models', { credentials: 'include' })
|
||||
if (res.ok) {
|
||||
availableModels.value = await res.json()
|
||||
}
|
||||
} catch {
|
||||
// silent
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCurrentModel() {
|
||||
try {
|
||||
const res = await fetch(`/api/dashboard/agents/${props.agent.id}/model`, { credentials: 'include' })
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
selectedModel.value = data.model
|
||||
currentModel.value = data.model
|
||||
}
|
||||
} catch {
|
||||
// silent
|
||||
}
|
||||
}
|
||||
|
||||
async function saveModel() {
|
||||
saving.value = true
|
||||
try {
|
||||
const res = await fetch(`/api/dashboard/agents/${props.agent.id}/model`, {
|
||||
method: 'PUT',
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ model: selectedModel.value }),
|
||||
})
|
||||
if (res.ok) {
|
||||
currentModel.value = selectedModel.value
|
||||
toast.success('Model updated successfully')
|
||||
} else {
|
||||
toast.error('Failed to update model')
|
||||
}
|
||||
} catch {
|
||||
toast.error('Connection error')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadModels()
|
||||
await loadCurrentModel()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -30,47 +99,56 @@ defineEmits<{
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close-btn" @click="$emit('close')" aria-label="Close">
|
||||
<Button variant="ghost" size="icon" class="h-8 w-8" @click="$emit('close')" aria-label="Close">
|
||||
<X :size="16" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<section class="modal-section">
|
||||
<h3 class="section-label">Status</h3>
|
||||
<div class="status-row">
|
||||
<Badge
|
||||
:variant="agent.active ? 'default' : 'secondary'"
|
||||
:class="agent.active ? 'bg-[rgba(81,212,154,0.1)] text-[#51d49a] border-[rgba(81,212,154,0.3)]' : 'bg-[rgba(107,115,133,0.08)] text-[#6b7385] border-[rgba(107,115,133,0.2)]'"
|
||||
>
|
||||
<span class="status-dot" :class="{ active: agent.active }" />
|
||||
{{ agent.active ? 'Active' : 'Idle' }}
|
||||
</Badge>
|
||||
<span v-if="agent.active" class="footer-badge">Runtime: {{ runtime }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="modal-desc">{{ agent.description }}</p>
|
||||
|
||||
<!-- Tags -->
|
||||
<section class="modal-section">
|
||||
<h3 class="section-label">Tags</h3>
|
||||
<div class="modal-tags-row">
|
||||
<Badge
|
||||
v-for="tag in agent.tags"
|
||||
:key="tag"
|
||||
variant="outline"
|
||||
:style="{ background: `${agent.color}18`, color: agent.color, borderColor: `${agent.color}30` }"
|
||||
>
|
||||
{{ tag }}
|
||||
</Badge>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Current Task -->
|
||||
<section class="modal-section">
|
||||
<h3 class="section-label">Current Task</h3>
|
||||
<p class="section-value">
|
||||
{{ agent.currentTask }}
|
||||
<span class="thinking-dots">
|
||||
<span v-if="agent.active" class="thinking-dots">
|
||||
<span class="thinking-dot blue"></span>
|
||||
<span class="thinking-dot violet"></span>
|
||||
</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Live Thinking -->
|
||||
<section class="modal-section">
|
||||
<h3 class="section-label">Live Thinking</h3>
|
||||
<div class="thinking-panel">
|
||||
<div class="thinking-stream">
|
||||
<div
|
||||
v-for="(msg, idx) in agent.thinkingStream"
|
||||
:key="idx"
|
||||
class="thinking-entry"
|
||||
:style="{ animationDelay: `${idx * 0.05}s` }"
|
||||
>
|
||||
<span class="entry-time">{{ msg.time }}</span>
|
||||
<span class="entry-text">{{ msg.text }}</span>
|
||||
</div>
|
||||
<div v-if="!agent.thinkingStream?.length" class="thinking-placeholder">
|
||||
Waiting for thought stream...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Goal + Progress -->
|
||||
<section class="modal-section">
|
||||
<h3 class="section-label">Goal</h3>
|
||||
@@ -78,33 +156,38 @@ defineEmits<{
|
||||
<div class="progress-row">
|
||||
<span class="progress-pct">{{ agent.progress }}%</span>
|
||||
<div class="progress-track">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: `${agent.progress}%` }"
|
||||
></div>
|
||||
<div class="progress-fill" :style="{ width: `${agent.progress}%` }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Working Feed -->
|
||||
<!-- Model -->
|
||||
<section class="modal-section">
|
||||
<h3 class="section-label">Working Feed</h3>
|
||||
<div class="work-feed">
|
||||
<div
|
||||
v-for="(step, idx) in agent.workingFeed"
|
||||
:key="idx"
|
||||
class="work-step"
|
||||
<h3 class="section-label">Model</h3>
|
||||
<div class="model-select-row">
|
||||
<Select v-model="selectedModel" class="flex-1 text-xs border-[#a78bfa]">
|
||||
<option v-for="m in availableModels" :key="m.id" :value="m.id">
|
||||
{{ m.name }} ({{ m.provider }})
|
||||
</option>
|
||||
</Select>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
class="bg-[#a78bfa] hover:bg-[#c4b5fd]"
|
||||
:disabled="saving || selectedModel === currentModel"
|
||||
@click="saveModel"
|
||||
>
|
||||
<span class="step-dot"></span>
|
||||
<span class="step-time">{{ step.time }}</span>
|
||||
<span class="step-text">{{ step.text }}</span>
|
||||
</div>
|
||||
{{ saving ? 'Saving...' : 'Save' }}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Stats -->
|
||||
<div class="modal-footer">
|
||||
<span class="footer-badge">Runtime: {{ runtime }}</span>
|
||||
<Badge :class="agent.active ? 'bg-[rgba(81,212,154,0.06)] text-[#51d49a] border-[rgba(81,212,154,0.25)]' : 'bg-[rgba(107,115,133,0.04)] text-[#6b7385] border-[rgba(107,115,133,0.15)]'">
|
||||
{{ agent.active ? '● Active' : '○ Idle' }}
|
||||
</Badge>
|
||||
<span v-if="agent.active" class="footer-badge">{{ runtime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -213,24 +296,6 @@ defineEmits<{
|
||||
color: var(--agent-color);
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #6b7385;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.modal-close-btn:hover {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
color: #e8eaf0;
|
||||
}
|
||||
|
||||
.modal-desc {
|
||||
font-size: 11px;
|
||||
line-height: 1.55;
|
||||
@@ -261,6 +326,36 @@ defineEmits<{
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Status */
|
||||
.status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #6b7385;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.status-dot.active {
|
||||
background: #51d49a;
|
||||
box-shadow: 0 0 8px rgba(81, 212, 154, 0.6);
|
||||
animation: pulse-dot 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.6; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
.modal-tags-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
.progress-row {
|
||||
display: flex;
|
||||
@@ -289,21 +384,7 @@ defineEmits<{
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
/* Live Thinking */
|
||||
.thinking-panel {
|
||||
position: relative;
|
||||
border: 1px solid rgba(139, 124, 246, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
background: rgba(12, 16, 22, 0.6);
|
||||
overflow: hidden;
|
||||
animation: panel-pulse 2.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes panel-pulse {
|
||||
0%, 100% { border-color: rgba(139, 124, 246, 0.25); box-shadow: 0 0 12px rgba(139,124,246,0.08); }
|
||||
50% { border-color: rgba(139, 124, 246, 0.5); box-shadow: 0 0 24px rgba(139,124,246,0.18), 0 0 40px rgba(139,124,246,0.06); }
|
||||
}
|
||||
|
||||
/* Thinking Dots */
|
||||
.thinking-dots {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
@@ -333,75 +414,6 @@ defineEmits<{
|
||||
50% { opacity: 1; transform: scale(1.4); }
|
||||
}
|
||||
|
||||
.thinking-stream {
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.thinking-entry {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: baseline;
|
||||
animation: slide-in-right 0.3s ease-out both;
|
||||
font-size: 10px;
|
||||
}
|
||||
@keyframes slide-in-right {
|
||||
from { opacity: 0; transform: translateX(-16px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
.entry-time {
|
||||
font-size: 8.5px;
|
||||
color: #6b7385;
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 42px;
|
||||
}
|
||||
.entry-text {
|
||||
color: #9ea5b3;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.thinking-placeholder {
|
||||
font-size: 10px;
|
||||
color: #4a5160;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Working Feed */
|
||||
.work-feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.work-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.step-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--agent-color);
|
||||
flex-shrink: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.step-text {
|
||||
font-size: 10.5px;
|
||||
color: #7e8799;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.step-time {
|
||||
font-size: 8.5px;
|
||||
color: #6b7385;
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
@@ -419,4 +431,11 @@ defineEmits<{
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
color: #7e8799;
|
||||
}
|
||||
|
||||
/* Model Selector */
|
||||
.model-select-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,208 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Code2, Server, Search, Shield, Bot } from '@lucide/vue'
|
||||
import type { AgentNodeData } from '../../composables/useDashboardData'
|
||||
|
||||
const props = defineProps<{
|
||||
agent: AgentNodeData
|
||||
runtime: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [agentId: string]
|
||||
}>()
|
||||
|
||||
const iconComponent = computed(() => {
|
||||
switch (props.agent.icon) {
|
||||
case 'code': return Code2
|
||||
case 'server': return Server
|
||||
case 'search': return Search
|
||||
case 'shield': return Shield
|
||||
default: return Bot
|
||||
}
|
||||
})
|
||||
|
||||
/* Workload Ring */
|
||||
const R = 18
|
||||
const STROKE = 3
|
||||
const CIRCUMFERENCE = 2 * Math.PI * R
|
||||
|
||||
const workloadOffset = computed(() => {
|
||||
const pct = Math.min(props.agent.workload, 100)
|
||||
return CIRCUMFERENCE - (CIRCUMFERENCE * pct) / 100
|
||||
})
|
||||
|
||||
const workloadRingColor = computed(() => {
|
||||
const w = props.agent.workload
|
||||
if (w < 40) return '#22c55e'
|
||||
if (w < 65) return '#eab308'
|
||||
if (w < 85) return '#f97316'
|
||||
return '#ef4444'
|
||||
})
|
||||
|
||||
const cardClass = computed(() =>
|
||||
props.agent.active ? 'agent-card pulse-active' : 'agent-card node-idle'
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
:class="cardClass"
|
||||
:style="{ '--agent-color': agent.color }"
|
||||
@click="emit('select', agent.id)"
|
||||
tabindex="0"
|
||||
@keyup.enter="emit('select', agent.id)"
|
||||
role="button"
|
||||
>
|
||||
<!-- Workload Ring -->
|
||||
<svg class="wl-ring" viewBox="0 0 44 44" width="44" height="44">
|
||||
<circle
|
||||
cx="22" cy="22" :r="R"
|
||||
fill="none"
|
||||
stroke="rgba(255,255,255,0.05)"
|
||||
:stroke-width="STROKE"
|
||||
/>
|
||||
<circle
|
||||
cx="22" cy="22" :r="R"
|
||||
fill="none"
|
||||
:stroke="workloadRingColor"
|
||||
:stroke-width="STROKE"
|
||||
stroke-linecap="round"
|
||||
:stroke-dasharray="CIRCUMFERENCE"
|
||||
:stroke-dashoffset="workloadOffset"
|
||||
transform="rotate(-90 22 22)"
|
||||
class="ring-fill"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!-- Icon -->
|
||||
<div class="node-icon" :style="{ background: `${agent.color}18`, color: agent.color }">
|
||||
<component :is="iconComponent" :size="18" />
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="node-info">
|
||||
<div class="node-name-row">
|
||||
<h3 class="node-name">{{ agent.name }}</h3>
|
||||
<span
|
||||
class="node-status-dot"
|
||||
:class="{ active: agent.active }"
|
||||
:style="{ background: agent.active ? agent.color : '#6b7385' }"
|
||||
></span>
|
||||
</div>
|
||||
<span class="node-role">{{ agent.role }}</span>
|
||||
<span class="node-task" :title="agent.currentTask">{{ agent.currentTask }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Runtime -->
|
||||
<div class="node-runtime">{{ runtime }}</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.agent-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
background: rgba(22, 27, 34, 0.75);
|
||||
border: 1px solid color-mix(in srgb, var(--agent-color) 15%, transparent);
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
position: relative;
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
.agent-card:hover {
|
||||
border-color: color-mix(in srgb, var(--agent-color) 40%, transparent);
|
||||
box-shadow: 0 0 24px color-mix(in srgb, var(--agent-color) 8%, transparent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.agent-card:focus-visible {
|
||||
outline: 2px solid var(--agent-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.node-idle {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Workload SVG Ring */
|
||||
.wl-ring {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ring-fill {
|
||||
transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.node-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Info */
|
||||
.node-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.node-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.node-name {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #e8eaf0;
|
||||
}
|
||||
.node-status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.node-status-dot.active {
|
||||
box-shadow: 0 0 6px currentColor;
|
||||
}
|
||||
.node-role {
|
||||
font-size: 9px;
|
||||
color: #6b7385;
|
||||
font-weight: 500;
|
||||
}
|
||||
.node-task {
|
||||
font-size: 9.5px;
|
||||
color: #7e8799;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 160px;
|
||||
}
|
||||
.node-runtime {
|
||||
font-size: 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: #6b7385;
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Pulse active dot */
|
||||
.pulse-active .node-status-dot {
|
||||
animation: pulse-dot 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.4); }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import { Bot } from '@lucide/vue'
|
||||
import type { ChatMessage } from '../../composables/useDashboardData'
|
||||
import { renderMarkdown } from '../../utils/markdown'
|
||||
|
||||
defineProps<{
|
||||
messages: ChatMessage[]
|
||||
irisBusy: boolean
|
||||
elapsedSeconds: number
|
||||
}>()
|
||||
|
||||
function formatTime(ts: number): string {
|
||||
const d = new Date(ts)
|
||||
return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
:class="['flex gap-2', msg.sender === 'user' ? 'justify-end' : '']"
|
||||
>
|
||||
<div v-if="msg.sender === 'iris'" class="flex-shrink-0 self-end w-6 h-6 grid place-items-center rounded-lg bg-[rgba(167,139,250,0.15)] text-[#a78bfa]">
|
||||
<Bot :size="12" />
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
'px-3 py-2 rounded-lg text-[10.5px] leading-[1.45] max-w-[85%]',
|
||||
msg.sender === 'iris'
|
||||
? 'bg-[rgba(167,139,250,0.08)] border border-[rgba(167,139,250,0.1)] text-[#d4d8e0]'
|
||||
: 'bg-[rgba(59,130,246,0.12)] border border-[rgba(59,130,246,0.15)] text-[#e8eaf0]',
|
||||
]"
|
||||
>
|
||||
<div v-if="msg.sender === 'iris'" v-html="renderMarkdown(msg.text)" class="msg-md"></div>
|
||||
<p v-else class="m-0">{{ msg.text }}</p>
|
||||
<div
|
||||
:class="[
|
||||
'text-[8px] mt-1 opacity-50',
|
||||
msg.sender === 'user' ? 'text-right' : 'text-left',
|
||||
]"
|
||||
>
|
||||
{{ formatTime(msg.timestamp) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Busy Bubble -->
|
||||
<div v-if="irisBusy" class="flex gap-2 max-w-[75%]">
|
||||
<div class="flex-shrink-0 self-end w-6 h-6 grid place-items-center rounded-lg bg-[rgba(167,139,250,0.15)] text-[#a78bfa]">
|
||||
<Bot :size="12" />
|
||||
</div>
|
||||
<div class="px-3 py-2 rounded-lg text-[10.5px] bg-[rgba(167,139,250,0.08)] border border-[rgba(167,139,250,0.18)] text-[#c4c8d4]">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-[7px] h-[7px] rounded-full bg-[#a78bfa] animate-pulse flex-shrink-0" />
|
||||
<span>Denkt nach...</span>
|
||||
</div>
|
||||
<div class="text-[8px] mt-1 opacity-50">läuft seit {{ elapsedSeconds }}s</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="messages.length === 0" class="flex-1 grid place-items-center text-center py-8">
|
||||
<p class="text-[10px] text-[#6b7385] max-w-[180px] leading-[1.4] m-0">
|
||||
No messages yet. Start a conversation with Iris.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.msg-md { line-height: 1.55; }
|
||||
.msg-md :deep(p) { margin: 0 0 6px 0; }
|
||||
.msg-md :deep(p:last-child) { margin-bottom: 0; }
|
||||
.msg-md :deep(strong) { color: #e8eaf0; font-weight: 700; }
|
||||
.msg-md :deep(em) { font-style: italic; color: #c4c8d4; }
|
||||
.msg-md :deep(code) { background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 4px; font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 10px; color: #f472b6; }
|
||||
.msg-md :deep(pre) { background: rgba(0,0,0,0.35); padding: 8px 10px; border-radius: 8px; overflow-x: auto; margin: 6px 0; border: 1px solid rgba(255,255,255,0.04); }
|
||||
.msg-md :deep(pre code) { background: none; padding: 0; font-size: 10px; color: #d4d8e0; }
|
||||
.msg-md :deep(a) { color: #a78bfa; text-decoration: underline; text-underline-offset: 2px; }
|
||||
.msg-md :deep(a:hover) { color: #c4b5fd; }
|
||||
.msg-md :deep(ul) { margin: 4px 0; padding-left: 16px; }
|
||||
.msg-md :deep(li) { margin: 2px 0; }
|
||||
.msg-md :deep(h1), .msg-md :deep(h2), .msg-md :deep(h3), .msg-md :deep(h4), .msg-md :deep(h5), .msg-md :deep(h6) { margin: 8px 0 4px 0; color: #e8eaf0; font-weight: 700; line-height: 1.3; }
|
||||
.msg-md :deep(h1) { font-size: 13px; }
|
||||
.msg-md :deep(h2) { font-size: 12px; }
|
||||
.msg-md :deep(h3) { font-size: 11px; }
|
||||
.msg-md :deep(h4), .msg-md :deep(h5), .msg-md :deep(h6) { font-size: 10.5px; }
|
||||
.msg-md :deep(hr) { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 8px 0; }
|
||||
</style>
|
||||
@@ -1,8 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, watch } from 'vue'
|
||||
import { Bot, Send, LoaderCircle, Maximize2, X } from '@lucide/vue'
|
||||
import { ref, nextTick, watch, onUnmounted } from 'vue'
|
||||
import { Bot, Send, Maximize2 } from '@lucide/vue'
|
||||
import type { ChatMessage } from '../../composables/useDashboardData'
|
||||
import { useDashboardData } from '../../composables/useDashboardData'
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import Textarea from '@/components/ui/Textarea.vue'
|
||||
import Dialog from '@/components/ui/Dialog.vue'
|
||||
import DialogHeader from '@/components/ui/DialogHeader.vue'
|
||||
import DialogTitle from '@/components/ui/DialogTitle.vue'
|
||||
import ChatMessageList from './ChatMessageList.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
messages: ChatMessage[]
|
||||
@@ -10,12 +16,46 @@ const props = defineProps<{
|
||||
irisFocus: string
|
||||
}>()
|
||||
|
||||
const { sendChatMessage } = useDashboardData()
|
||||
const { sendChatMessage, busySince } = useDashboardData()
|
||||
|
||||
const elapsedSeconds = ref(0)
|
||||
let elapsedInterval: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
function startElapsedTimer(): void {
|
||||
stopElapsedTimer()
|
||||
const update = () => {
|
||||
if (busySince.value > 0) {
|
||||
elapsedSeconds.value = Math.floor((Date.now() - busySince.value) / 1000)
|
||||
}
|
||||
}
|
||||
update()
|
||||
elapsedInterval = setInterval(update, 1000)
|
||||
}
|
||||
|
||||
function stopElapsedTimer(): void {
|
||||
if (elapsedInterval) {
|
||||
clearInterval(elapsedInterval)
|
||||
elapsedInterval = null
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.irisBusy, (busy) => {
|
||||
if (busy) {
|
||||
startElapsedTimer()
|
||||
} else {
|
||||
stopElapsedTimer()
|
||||
elapsedSeconds.value = 0
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
onUnmounted(() => {
|
||||
stopElapsedTimer()
|
||||
})
|
||||
|
||||
const inputText = ref('')
|
||||
const chatListRef = ref<HTMLElement | null>(null)
|
||||
const chatModalListRef = ref<HTMLElement | null>(null)
|
||||
const chatModalOpen = ref(false)
|
||||
const dialogOpen = ref(false)
|
||||
|
||||
function sendMessage(): void {
|
||||
if (!inputText.value.trim()) return
|
||||
@@ -27,7 +67,7 @@ watch(
|
||||
() => props.messages.length,
|
||||
async () => {
|
||||
await nextTick()
|
||||
const el = chatModalOpen.value ? chatModalListRef.value : chatListRef.value
|
||||
const el = dialogOpen.value ? chatModalListRef.value : chatListRef.value
|
||||
if (el) {
|
||||
el.scrollTop = el.scrollHeight
|
||||
}
|
||||
@@ -36,19 +76,16 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Inline Chat Panel -->
|
||||
<div class="chat-panel">
|
||||
<div class="chat-header">
|
||||
<div class="chat-header-left">
|
||||
<Bot :size="16" class="chat-header-icon" />
|
||||
<Bot :size="16" class="text-[#a78bfa]" />
|
||||
<h2>Iris Chat</h2>
|
||||
</div>
|
||||
<div v-if="irisBusy" class="busy-badge">
|
||||
<LoaderCircle :size="10" class="spin" />
|
||||
<span>Busy</span>
|
||||
</div>
|
||||
<button class="chat-expand-btn" @click="chatModalOpen = true" title="Open larger chat">
|
||||
<Button variant="ghost" size="icon" class="h-7 w-7" @click="dialogOpen = true" title="Open larger chat">
|
||||
<Maximize2 :size="14" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Focus Bar -->
|
||||
@@ -59,104 +96,80 @@ watch(
|
||||
|
||||
<!-- Messages -->
|
||||
<div ref="chatListRef" class="chat-messages">
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
:class="['msg-row', msg.sender === 'user' ? 'msg-user' : 'msg-iris']"
|
||||
>
|
||||
<div v-if="msg.sender === 'iris'" class="msg-avatar">
|
||||
<Bot :size="12" />
|
||||
</div>
|
||||
<div class="msg-bubble">
|
||||
<p>{{ msg.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="messages.length === 0" class="empty-state">
|
||||
<p>No messages yet. Start a conversation with Iris.</p>
|
||||
</div>
|
||||
<ChatMessageList
|
||||
:messages="messages"
|
||||
:iris-busy="irisBusy"
|
||||
:elapsed-seconds="elapsedSeconds"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<div class="chat-input-row">
|
||||
<input
|
||||
<Textarea
|
||||
v-model="inputText"
|
||||
type="text"
|
||||
rows="1"
|
||||
placeholder="Type a message..."
|
||||
@keyup.enter="sendMessage"
|
||||
class="min-h-0 h-9 resize-none text-xs bg-black/30 border-[rgba(255,255,255,0.08)] text-[#e8eaf0] placeholder:text-[#6b7385] text-[10px]"
|
||||
@keyup.enter.exact="sendMessage"
|
||||
/>
|
||||
<button
|
||||
class="send-btn"
|
||||
<Button
|
||||
size="icon"
|
||||
class="h-8 w-8 bg-[#a78bfa] hover:bg-[#c4b5fd] flex-shrink-0"
|
||||
:disabled="!inputText.trim()"
|
||||
@click="sendMessage"
|
||||
aria-label="Send"
|
||||
>
|
||||
<Send :size="14" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Expanded Chat Modal -->
|
||||
<Teleport to="body">
|
||||
<div v-if="chatModalOpen" class="chat-modal-overlay" @click.self="chatModalOpen = false">
|
||||
<div class="chat-modal">
|
||||
<div class="chat-modal-header">
|
||||
<div class="chat-modal-header-left">
|
||||
<Bot :size="18" class="chat-header-icon" />
|
||||
<h2>Iris Chat</h2>
|
||||
</div>
|
||||
<div v-if="irisBusy" class="busy-badge">
|
||||
<LoaderCircle :size="10" class="spin" />
|
||||
<span>Busy</span>
|
||||
</div>
|
||||
<button class="chat-modal-close" @click="chatModalOpen = false" title="Close">
|
||||
<X :size="16" />
|
||||
</button>
|
||||
<!-- Expanded Chat Dialog -->
|
||||
<Dialog :open="dialogOpen" class="sm:max-w-[820px] sm:h-[78vh] p-0 gap-0" @update:open="dialogOpen = $event">
|
||||
<template #default>
|
||||
<DialogHeader class="flex-row items-center justify-between px-5 py-4 border-b border-[rgba(255,255,255,0.06)]">
|
||||
<div class="flex items-center gap-2">
|
||||
<Bot :size="18" class="text-[#a78bfa]" />
|
||||
<DialogTitle>Iris Chat</DialogTitle>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" class="h-7 w-7" @click="dialogOpen = false" aria-label="Close">
|
||||
<span class="text-lg leading-none">×</span>
|
||||
</Button>
|
||||
</DialogHeader>
|
||||
|
||||
<div v-if="irisBusy && irisFocus" class="focus-bar">
|
||||
<span class="focus-label">Current Focus</span>
|
||||
<span class="focus-text">{{ irisFocus }}</span>
|
||||
</div>
|
||||
|
||||
<div ref="chatModalListRef" class="chat-modal-messages">
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
:class="['msg-row', msg.sender === 'user' ? 'msg-user' : 'msg-iris']"
|
||||
>
|
||||
<div v-if="msg.sender === 'iris'" class="msg-avatar">
|
||||
<Bot :size="14" />
|
||||
</div>
|
||||
<div class="msg-bubble">
|
||||
<p>{{ msg.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="messages.length === 0" class="empty-state">
|
||||
<p>No messages yet. Start a conversation with Iris.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-modal-input-row">
|
||||
<input
|
||||
v-model="inputText"
|
||||
type="text"
|
||||
placeholder="Type a message..."
|
||||
@keyup.enter="sendMessage"
|
||||
/>
|
||||
<button
|
||||
class="send-btn"
|
||||
:disabled="!inputText.trim()"
|
||||
@click="sendMessage"
|
||||
aria-label="Send"
|
||||
>
|
||||
<Send :size="16" />
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="irisBusy && irisFocus" class="focus-bar !px-5">
|
||||
<span class="focus-label">Current Focus</span>
|
||||
<span class="focus-text">{{ irisFocus }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<div ref="chatModalListRef" class="flex-1 overflow-y-auto px-5 py-4">
|
||||
<ChatMessageList
|
||||
:messages="messages"
|
||||
:iris-busy="irisBusy"
|
||||
:elapsed-seconds="elapsedSeconds"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 px-4 py-3 border-t border-[rgba(255,255,255,0.06)]">
|
||||
<Textarea
|
||||
v-model="inputText"
|
||||
rows="1"
|
||||
placeholder="Type a message..."
|
||||
class="min-h-0 h-10 resize-none text-sm bg-black/30 border-[rgba(255,255,255,0.08)] text-[#e8eaf0] placeholder:text-[#6b7385]"
|
||||
@keyup.enter.exact="sendMessage"
|
||||
/>
|
||||
<Button
|
||||
size="icon"
|
||||
class="h-10 w-10 bg-[#a78bfa] hover:bg-[#c4b5fd] flex-shrink-0"
|
||||
:disabled="!inputText.trim()"
|
||||
@click="sendMessage"
|
||||
aria-label="Send"
|
||||
>
|
||||
<Send :size="18" />
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@@ -191,54 +204,12 @@ watch(
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.chat-header-icon {
|
||||
color: #a78bfa;
|
||||
}
|
||||
.chat-header h2 {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #e8eaf0;
|
||||
}
|
||||
.busy-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
color: #eab308;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
background: rgba(234, 179, 8, 0.08);
|
||||
border: 1px solid rgba(234, 179, 8, 0.15);
|
||||
}
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Expand Button */
|
||||
.chat-expand-btn {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: #6b7385;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.chat-expand-btn:hover {
|
||||
background: rgba(167, 139, 250, 0.12);
|
||||
border-color: rgba(167, 139, 250, 0.25);
|
||||
color: #a78bfa;
|
||||
}
|
||||
|
||||
/* Focus Bar */
|
||||
.focus-bar {
|
||||
@@ -267,9 +238,6 @@ watch(
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.chat-messages::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
@@ -282,59 +250,6 @@ watch(
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.msg-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
max-width: 85%;
|
||||
}
|
||||
.msg-user {
|
||||
align-self: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.msg-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: rgba(167, 139, 250, 0.15);
|
||||
color: #a78bfa;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.msg-bubble {
|
||||
padding: 8px 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 10.5px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.msg-iris .msg-bubble {
|
||||
background: rgba(167, 139, 250, 0.08);
|
||||
border: 1px solid rgba(167, 139, 250, 0.1);
|
||||
color: #d4d8e0;
|
||||
}
|
||||
.msg-user .msg-bubble {
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||
color: #e8eaf0;
|
||||
}
|
||||
.msg-bubble p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.empty-state p {
|
||||
font-size: 10px;
|
||||
color: #6b7385;
|
||||
max-width: 180px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.chat-input-row {
|
||||
display: flex;
|
||||
@@ -342,157 +257,35 @@ watch(
|
||||
padding: 10px 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.chat-input-row input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #e8eaf0;
|
||||
font-size: 10px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
min-width: 0;
|
||||
}
|
||||
.chat-input-row input:focus {
|
||||
border-color: #a78bfa;
|
||||
}
|
||||
.chat-input-row input::placeholder {
|
||||
color: #6b7385;
|
||||
}
|
||||
.send-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #a78bfa;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.send-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: default;
|
||||
}
|
||||
.send-btn:not(:disabled):hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Chat Modal Overlay */
|
||||
.chat-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
.chat-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
max-width: 700px;
|
||||
height: 70vh;
|
||||
max-height: 80vh;
|
||||
background: rgba(22, 27, 34, 0.92);
|
||||
border: 1px solid rgba(139, 124, 246, 0.15);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
animation: modal-in 0.2s ease-out;
|
||||
}
|
||||
@keyframes modal-in {
|
||||
from { opacity: 0; transform: scale(0.95) translateY(10px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
.chat-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.chat-modal-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
.chat-modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #e8eaf0;
|
||||
}
|
||||
.chat-modal-close {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #6b7385;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chat-modal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #e8eaf0;
|
||||
}
|
||||
|
||||
.chat-modal-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.chat-modal-messages::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.chat-modal-messages::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.chat-modal-messages::-webkit-scrollbar-thumb {
|
||||
background: rgba(139, 124, 246, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-modal-input-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.chat-modal-input-row input {
|
||||
flex: 1;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #e8eaf0;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
min-width: 0;
|
||||
}
|
||||
.chat-modal-input-row input:focus {
|
||||
border-color: #a78bfa;
|
||||
}
|
||||
.chat-modal-input-row input::placeholder {
|
||||
color: #6b7385;
|
||||
/* ── Mobile: compact mode ── */
|
||||
@media (max-width: 768px) {
|
||||
.chat-panel {
|
||||
min-height: 280px;
|
||||
max-height: 360px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.chat-header {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.chat-header h2 {
|
||||
font-size: 11px;
|
||||
}
|
||||
.chat-messages {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.chat-input-row {
|
||||
padding: 8px 10px;
|
||||
gap: 4px;
|
||||
}
|
||||
.focus-bar {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
.focus-label {
|
||||
font-size: 7px;
|
||||
}
|
||||
.focus-text {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,6 +10,8 @@ import {
|
||||
Zap,
|
||||
} from '@lucide/vue'
|
||||
import type { QueueItem } from '../../composables/useDashboardData'
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import Badge from '@/components/ui/Badge.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
items: QueueItem[]
|
||||
@@ -73,16 +75,18 @@ function onDragEnd(): void {
|
||||
|
||||
<template>
|
||||
<div class="queue-panel">
|
||||
<div class="queue-header" @click="expanded = !expanded">
|
||||
<div class="queue-header" @click="expanded = !expanded" role="button" tabindex="0" :aria-expanded="expanded" @keyup.enter="expanded = !expanded">
|
||||
<div class="queue-header-left">
|
||||
<ListTodo :size="14" class="queue-icon" />
|
||||
<ListTodo :size="14" class="text-[#a78bfa]" />
|
||||
<h2>Chat Queue</h2>
|
||||
<span class="queue-count">{{ items.length }}</span>
|
||||
<Badge variant="outline" class="text-[10px] font-bold text-[#a78bfa] bg-[rgba(167,139,250,0.1)] border-0 rounded-full px-2">
|
||||
{{ items.length }}
|
||||
</Badge>
|
||||
</div>
|
||||
<button class="queue-toggle" aria-label="Toggle">
|
||||
<Button variant="ghost" size="icon" class="h-6 w-6" :aria-label="expanded ? 'Collapse' : 'Expand'">
|
||||
<ChevronUp v-if="expanded" :size="14" />
|
||||
<ChevronDown v-else :size="14" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Transition name="queue-expand">
|
||||
@@ -103,8 +107,9 @@ function onDragEnd(): void {
|
||||
>
|
||||
<div class="queue-item-body">
|
||||
<div class="queue-item-head">
|
||||
<span
|
||||
class="priority-badge"
|
||||
<Badge
|
||||
variant="outline"
|
||||
class="text-[7px] font-bold uppercase tracking-wider py-0 px-1.5 border"
|
||||
:style="{
|
||||
color: priorityColor[item.priority],
|
||||
borderColor: `${priorityColor[item.priority]}30`,
|
||||
@@ -112,43 +117,25 @@ function onDragEnd(): void {
|
||||
}"
|
||||
>
|
||||
{{ item.priority }}
|
||||
</span>
|
||||
</Badge>
|
||||
<span class="queue-wait">{{ item.waitTime }}</span>
|
||||
</div>
|
||||
<p class="queue-text">{{ item.text }}</p>
|
||||
</div>
|
||||
|
||||
<div class="queue-actions">
|
||||
<button
|
||||
class="q-action-btn"
|
||||
title="Execute now"
|
||||
@click.stop="emit('executeNow', item.id)"
|
||||
>
|
||||
<Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#e8eaf0]" title="Execute now" @click.stop="emit('executeNow', item.id)">
|
||||
<Zap :size="12" />
|
||||
</button>
|
||||
<button
|
||||
class="q-action-btn"
|
||||
title="Move up"
|
||||
:disabled="idx === 0"
|
||||
@click.stop="emit('moveUp', item.id)"
|
||||
>
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#e8eaf0]" title="Move up" :disabled="idx === 0" @click.stop="emit('moveUp', item.id)">
|
||||
<ArrowUp :size="12" />
|
||||
</button>
|
||||
<button
|
||||
class="q-action-btn"
|
||||
title="Move down"
|
||||
:disabled="idx === items.length - 1"
|
||||
@click.stop="emit('moveDown', item.id)"
|
||||
>
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#e8eaf0]" title="Move down" :disabled="idx === items.length - 1" @click.stop="emit('moveDown', item.id)">
|
||||
<ArrowDown :size="12" />
|
||||
</button>
|
||||
<button
|
||||
class="q-action-btn q-action-danger"
|
||||
title="Remove"
|
||||
@click.stop="emit('remove', item.id)"
|
||||
>
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#ef4444] hover:bg-[rgba(239,68,68,0.1)]" title="Remove" @click.stop="emit('remove', item.id)">
|
||||
<Trash2 :size="12" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -189,40 +176,12 @@ function onDragEnd(): void {
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
.queue-icon {
|
||||
color: #a78bfa;
|
||||
}
|
||||
.queue-header h2 {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #e8eaf0;
|
||||
}
|
||||
.queue-count {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #a78bfa;
|
||||
padding: 1px 7px;
|
||||
border-radius: 10px;
|
||||
background: rgba(167, 139, 250, 0.1);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.queue-toggle {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #6b7385;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.queue-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #e8eaf0;
|
||||
}
|
||||
|
||||
.queue-list {
|
||||
display: flex;
|
||||
@@ -263,15 +222,6 @@ function onDragEnd(): void {
|
||||
gap: 6px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.priority-badge {
|
||||
font-size: 7px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.queue-wait {
|
||||
font-size: 8px;
|
||||
color: #6b7385;
|
||||
@@ -296,30 +246,6 @@ function onDragEnd(): void {
|
||||
.queue-item:hover .queue-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
.q-action-btn {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #6b7385;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.q-action-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #e8eaf0;
|
||||
}
|
||||
.q-action-btn:disabled {
|
||||
opacity: 0.25;
|
||||
cursor: default;
|
||||
}
|
||||
.q-action-danger:hover {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.queue-empty {
|
||||
text-align: center;
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
import { ref } from 'vue'
|
||||
import { Plus, Circle, ChevronRight } from '@lucide/vue'
|
||||
import type { OpenTask } from '../../composables/useDashboardData'
|
||||
import Button from '@/components/ui/button/Button.vue'
|
||||
import Badge from '@/components/ui/Badge.vue'
|
||||
|
||||
defineProps<{
|
||||
tasks: OpenTask[]
|
||||
@@ -23,10 +25,10 @@ function toggleExpand(id: string) {
|
||||
<div class="task-card-panel">
|
||||
<div class="task-header">
|
||||
<h2 class="task-title">Offene Aufgaben</h2>
|
||||
<button class="new-task-btn" @click="emit('newTask')">
|
||||
<Button variant="outline" size="sm" class="h-7 text-[9px] gap-1 border-[rgba(139,124,246,0.2)] bg-[rgba(139,124,246,0.12)] text-[#a78bfa] hover:bg-[rgba(139,124,246,0.2)]" @click="emit('newTask')">
|
||||
<Plus :size="12" />
|
||||
<span>New Task</span>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="task-list">
|
||||
@@ -54,12 +56,14 @@ function toggleExpand(id: string) {
|
||||
<span class="task-name">{{ task.title }}</span>
|
||||
<span class="task-time">{{ task.createdAt }}</span>
|
||||
</div>
|
||||
<span
|
||||
class="task-source-tag"
|
||||
:class="task.source === 'iris' ? 'tag-iris' : 'tag-bao'"
|
||||
<Badge
|
||||
variant="outline"
|
||||
:class="task.source === 'iris'
|
||||
? 'bg-[rgba(167,139,250,0.15)] text-[#a78bfa] border-0 text-[8px] py-0 px-1.5'
|
||||
: 'bg-[rgba(59,130,246,0.15)] text-[#3b82f6] border-0 text-[8px] py-0 px-1.5'"
|
||||
>
|
||||
{{ task.source === 'iris' ? 'Iris' : 'Bao' }}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="expandedId === task.id" class="task-detail">
|
||||
@@ -69,10 +73,10 @@ function toggleExpand(id: string) {
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
|
||||
<button class="task-board-btn" @click="emit('go-board')">
|
||||
<Button variant="ghost" class="w-full mt-3 h-9 gap-1.5 text-[10px] border border-[rgba(139,124,246,0.15)] bg-[rgba(139,124,246,0.08)] text-[#a78bfa] hover:bg-[rgba(139,124,246,0.15)]" @click="emit('go-board')">
|
||||
<span>Zum Task Board</span>
|
||||
<ChevronRight :size="14" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -105,24 +109,6 @@ function toggleExpand(id: string) {
|
||||
font-weight: 600;
|
||||
color: #e8eaf0;
|
||||
}
|
||||
.new-task-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 10px;
|
||||
background: rgba(139, 124, 246, 0.12);
|
||||
border: 1px solid rgba(139, 124, 246, 0.2);
|
||||
border-radius: 6px;
|
||||
color: #a78bfa;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.new-task-btn:hover {
|
||||
background: rgba(139, 124, 246, 0.2);
|
||||
border-color: rgba(139, 124, 246, 0.35);
|
||||
}
|
||||
|
||||
.task-list {
|
||||
display: flex;
|
||||
@@ -191,24 +177,6 @@ function toggleExpand(id: string) {
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.task-source-tag {
|
||||
display: inline-block;
|
||||
font-size: 8px;
|
||||
font-weight: 600;
|
||||
padding: 1px 7px;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 0.02em;
|
||||
align-self: flex-start;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.tag-iris {
|
||||
background: rgba(167, 139, 250, 0.15);
|
||||
color: #a78bfa;
|
||||
}
|
||||
.tag-bao {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.task-detail {
|
||||
padding: 6px 10px;
|
||||
@@ -229,20 +197,6 @@ function toggleExpand(id: string) {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.task-board-btn {
|
||||
width: 100%; margin-top: 12px; padding: 10px;
|
||||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
background: rgba(139, 124, 246, 0.08);
|
||||
border: 1px solid rgba(139, 124, 246, 0.15);
|
||||
border-radius: 10px; color: #a78bfa;
|
||||
font-size: 10px; font-weight: 600; cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.task-board-btn:hover {
|
||||
background: rgba(139, 124, 246, 0.15);
|
||||
border-color: rgba(139, 124, 246, 0.3);
|
||||
}
|
||||
|
||||
/* TransitionGroup */
|
||||
.task-enter-active {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, toRef } from 'vue'
|
||||
import { ref, computed, toRef, onMounted, onUnmounted } from 'vue'
|
||||
import { Bot, Code2, Server, Shield, Search, Terminal } from '@lucide/vue'
|
||||
import type { AgentNodeData } from '../../composables/useDashboardData'
|
||||
import { useTeamNetworkSvg } from '../../composables/useTeamNetworkSvg'
|
||||
@@ -55,6 +55,40 @@ function formatRuntime(seconds: number): string {
|
||||
return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
// ── Model formatter ──
|
||||
function formatModel(model: string): string {
|
||||
const parts = model.split('/')
|
||||
const name = parts[parts.length - 1]
|
||||
return name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
|
||||
}
|
||||
|
||||
// ── Mobile media query ──
|
||||
const isMobile = ref(false)
|
||||
let mq: MediaQueryList | null = null
|
||||
|
||||
function onMqChange(e: MediaQueryListEvent) {
|
||||
isMobile.value = e.matches
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
mq = window.matchMedia('(max-width: 600px)')
|
||||
isMobile.value = mq.matches
|
||||
mq.addEventListener('change', onMqChange)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (mq) {
|
||||
mq.removeEventListener('change', onMqChange)
|
||||
}
|
||||
})
|
||||
|
||||
function visibleTags(tags: string[]) {
|
||||
if (!isMobile.value || tags.length <= 4) {
|
||||
return { shown: tags, overflow: 0 }
|
||||
}
|
||||
return { shown: tags.slice(0, 4), overflow: tags.length - 4 }
|
||||
}
|
||||
|
||||
// ── Hero computed ──
|
||||
const hero = computed(() => props.agents.find(a => a.id === heroId.value) ?? props.agents[0])
|
||||
</script>
|
||||
@@ -167,14 +201,20 @@ const hero = computed(() => props.agents.find(a => a.id === heroId.value) ?? pro
|
||||
<p class="card-desc">{{ hero.description }}</p>
|
||||
<div v-if="hero.currentTask" class="task-row">
|
||||
<span class="node-task">
|
||||
<span class="node-task-dot">●</span>
|
||||
<span class="node-task-dot" :style="{ color: hero.color }">●</span>
|
||||
{{ hero.currentTask }}
|
||||
</span>
|
||||
<span class="node-runtime">{{ formatRuntime(hero.runtimeSeconds) }}</span>
|
||||
<span v-if="hero.model" class="node-model">{{ hero.model }}</span>
|
||||
<span v-if="hero.model" class="node-model">{{ formatModel(hero.model) }}</span>
|
||||
</div>
|
||||
<div v-else class="idle-row">
|
||||
<span class="idle-badge">Idle</span>
|
||||
</div>
|
||||
<div class="card-tags">
|
||||
<span v-for="tag in hero.tags" :key="tag" class="card-tag" :style="{ background: `${hero.color}18`, color: hero.color }">{{ tag }}</span>
|
||||
<template v-for="(tag, idx) in visibleTags(hero.tags).shown" :key="tag">
|
||||
<span class="card-tag" :style="{ background: `${hero.color}18`, color: hero.color }">{{ tag }}</span>
|
||||
</template>
|
||||
<span v-if="visibleTags(hero.tags).overflow > 0" class="card-tag tag-overflow" :style="{ background: `${hero.color}18`, color: hero.color }">+{{ visibleTags(hero.tags).overflow }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -215,14 +255,20 @@ const hero = computed(() => props.agents.find(a => a.id === heroId.value) ?? pro
|
||||
<p class="card-desc">{{ agent.description }}</p>
|
||||
<div v-if="agent.currentTask" class="task-row">
|
||||
<span class="node-task">
|
||||
<span class="node-task-dot">●</span>
|
||||
<span class="node-task-dot" :style="{ color: agent.color }">●</span>
|
||||
{{ agent.currentTask }}
|
||||
</span>
|
||||
<span class="node-runtime">{{ formatRuntime(agent.runtimeSeconds) }}</span>
|
||||
<span v-if="agent.model" class="node-model">{{ agent.model }}</span>
|
||||
<span v-if="agent.model" class="node-model">{{ formatModel(agent.model) }}</span>
|
||||
</div>
|
||||
<div v-else class="idle-row">
|
||||
<span class="idle-badge">Idle</span>
|
||||
</div>
|
||||
<div class="card-tags">
|
||||
<span v-for="tag in agent.tags" :key="tag" class="card-tag" :style="{ background: `${agent.color}18`, color: agent.color }">{{ tag }}</span>
|
||||
<template v-for="(tag, idx) in visibleTags(agent.tags).shown" :key="tag">
|
||||
<span class="card-tag" :style="{ background: `${agent.color}18`, color: agent.color }">{{ tag }}</span>
|
||||
</template>
|
||||
<span v-if="visibleTags(agent.tags).overflow > 0" class="card-tag tag-overflow" :style="{ background: `${agent.color}18`, color: agent.color }">+{{ visibleTags(agent.tags).overflow }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -393,6 +439,20 @@ const hero = computed(() => props.agents.find(a => a.id === heroId.value) ?? pro
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
/* ── Idle Row ── */
|
||||
.idle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.idle-badge {
|
||||
font-size: 9px;
|
||||
color: #6b7385;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: rgba(107, 115, 133, 0.15);
|
||||
}
|
||||
|
||||
/* ── Tags ── */
|
||||
.card-tags {
|
||||
display: flex;
|
||||
@@ -407,6 +467,9 @@ const hero = computed(() => props.agents.find(a => a.id === heroId.value) ?? pro
|
||||
border-radius: 5px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.tag-overflow {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ── Hover Arrow ── */
|
||||
.card-arrow {
|
||||
@@ -428,12 +491,51 @@ const hero = computed(() => props.agents.find(a => a.id === heroId.value) ?? pro
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
/* ── Tablet ── */
|
||||
@media (max-width: 900px) {
|
||||
.agent-grid {
|
||||
max-width: 100%;
|
||||
gap: 12px;
|
||||
}
|
||||
.hero-slot {
|
||||
max-width: 100%;
|
||||
}
|
||||
.card-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
.card-desc {
|
||||
font-size: 9.5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Mobile ── */
|
||||
@media (max-width: 600px) {
|
||||
.agent-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.agent-card {
|
||||
padding: 12px;
|
||||
}
|
||||
.card-icon-wrap {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
.card-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
.card-role-tag {
|
||||
font-size: 7.5px;
|
||||
}
|
||||
.card-desc {
|
||||
font-size: 9px;
|
||||
}
|
||||
.card-tag {
|
||||
font-size: 8px;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
.cards-layer {
|
||||
gap: 20px;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -36,8 +36,8 @@ defineEmits<{
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid var(--line, #1f2330);
|
||||
background: var(--panel, #11141b);
|
||||
border-bottom: 1px solid var(--nx-line, #1f2330);
|
||||
background: var(--nx-panel, #11141b);
|
||||
}
|
||||
.mobile-menu { display: none; }
|
||||
.search {
|
||||
@@ -46,9 +46,9 @@ defineEmits<{
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--line, #1f2330);
|
||||
border: 1px solid var(--nx-line, #1f2330);
|
||||
border-radius: 7px;
|
||||
color: var(--text-dim, #6f7889);
|
||||
color: var(--nx-text-dim, #6f7889);
|
||||
font-size: 11px;
|
||||
}
|
||||
.search kbd {
|
||||
@@ -82,13 +82,13 @@ defineEmits<{
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: var(--accent, #7b6ef2);
|
||||
background: var(--nx-accent, #7b6ef2);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.mobile-menu { display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid var(--line, #1f2330); border-radius: 6px; background: transparent; color: var(--accent, #7b6ef2); cursor: pointer; }
|
||||
.mobile-menu { display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid var(--nx-line, #1f2330); border-radius: 6px; background: transparent; color: var(--nx-accent, #7b6ef2); cursor: pointer; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -154,9 +154,9 @@ async function logout() {
|
||||
.nav-separator {
|
||||
height: 1px;
|
||||
margin: 6px 10px;
|
||||
background: var(--line, #1f2330);
|
||||
background: var(--nx-line, #1f2330);
|
||||
}
|
||||
.sidebar-bottom { padding: 8px 0; border-top: 1px solid var(--line, #1f2330); }
|
||||
.sidebar-bottom { padding: 8px 0; border-top: 1px solid var(--nx-line, #1f2330); }
|
||||
.sidebar-bottom > button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -171,8 +171,8 @@ async function logout() {
|
||||
cursor: pointer;
|
||||
transition: background .15s, color .15s;
|
||||
}
|
||||
.sidebar-bottom > button:hover { background: var(--accent-soft, rgba(123,110,242,.08)); color: #d8dbe3; }
|
||||
.sidebar-bottom > button.active { background: var(--accent-soft, rgba(123,110,242,.08)); color: var(--accent, #7b6ef2); font-weight: 600; }
|
||||
.sidebar-bottom > button:hover { background: var(--nx-accent-soft, rgba(123,110,242,.08)); color: #d8dbe3; }
|
||||
.sidebar-bottom > button.active { background: var(--nx-accent-soft, rgba(123,110,242,.08)); color: var(--nx-accent, #7b6ef2); font-weight: 600; }
|
||||
.owner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const badgeVariants = cva(
|
||||
'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
|
||||
secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
|
||||
outline: 'text-foreground',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
interface Props {
|
||||
variant?: NonNullable<VariantProps<typeof badgeVariants>['variant']>
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
variant: 'default',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span :class="cn(badgeVariants({ variant }), props.class)">
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('rounded-xl border bg-card text-card-foreground shadow', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('p-6 pt-0', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('text-sm text-muted-foreground', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('font-semibold leading-none tracking-tight', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
open?: boolean
|
||||
class?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
open: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:open': [value: boolean]
|
||||
}>()
|
||||
|
||||
const visible = ref(props.open)
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(val) => {
|
||||
visible.value = val
|
||||
},
|
||||
)
|
||||
|
||||
function close() {
|
||||
emit('update:open', false)
|
||||
}
|
||||
|
||||
function onOverlayClick() {
|
||||
close()
|
||||
}
|
||||
|
||||
defineExpose({ close })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="visible"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center"
|
||||
@click.self="onOverlayClick"
|
||||
>
|
||||
<!-- Overlay -->
|
||||
<div class="fixed inset-0 bg-black/60 backdrop-blur-sm" />
|
||||
|
||||
<!-- Content -->
|
||||
<div
|
||||
:class="
|
||||
cn(
|
||||
'relative z-50 w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
>
|
||||
<slot :close="close" />
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
|
||||
interface Props {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p :class="cn('text-sm text-muted-foreground', props.class)">
|
||||
<slot />
|
||||
</p>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('flex flex-col space-y-1.5 text-center sm:text-left', props.class)">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h2 :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
|
||||
<slot />
|
||||
</h2>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<input
|
||||
:class="
|
||||
cn(
|
||||
'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
class?: HTMLAttributes['class']
|
||||
modelValue?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<select
|
||||
:value="modelValue"
|
||||
:disabled="disabled"
|
||||
:class="
|
||||
cn(
|
||||
'flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
@change="emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
|
||||
>
|
||||
<slot />
|
||||
</select>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface Props {
|
||||
class?: HTMLAttributes['class']
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<textarea
|
||||
:class="
|
||||
cn(
|
||||
'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,138 @@
|
||||
<script setup lang="ts">
|
||||
import { CheckCircle, XCircle, Info, X } from '@lucide/vue'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
|
||||
const { toasts, remove } = useToast()
|
||||
|
||||
const typeConfig: Record<string, { icon: any; color: string; bg: string }> = {
|
||||
success: {
|
||||
icon: CheckCircle,
|
||||
color: '#22c55e',
|
||||
bg: 'rgba(34, 197, 94, 0.10)',
|
||||
},
|
||||
error: {
|
||||
icon: XCircle,
|
||||
color: '#ef4444',
|
||||
bg: 'rgba(239, 68, 68, 0.10)',
|
||||
},
|
||||
info: {
|
||||
icon: Info,
|
||||
color: '#3b82f6',
|
||||
bg: 'rgba(59, 130, 246, 0.10)',
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div class="toast-container" role="status" aria-live="polite">
|
||||
<TransitionGroup name="toast">
|
||||
<div
|
||||
v-for="toast in toasts"
|
||||
:key="toast.id"
|
||||
class="toast-item"
|
||||
:style="{
|
||||
'--toast-color': typeConfig[toast.type].color,
|
||||
'--toast-bg': typeConfig[toast.type].bg,
|
||||
}"
|
||||
>
|
||||
<div class="toast-icon-wrap">
|
||||
<component :is="typeConfig[toast.type].icon" :size="18" />
|
||||
</div>
|
||||
<span class="toast-message">{{ toast.message }}</span>
|
||||
<button class="toast-close" @click="remove(toast.id)" aria-label="Dismiss">
|
||||
<X :size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-width: 400px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 14px 12px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid color-mix(in srgb, var(--toast-color) 25%, transparent);
|
||||
background: rgba(17, 20, 27, 0.92);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 color-mix(in srgb, var(--toast-color) 12%, transparent);
|
||||
pointer-events: auto;
|
||||
color: #e8eaf0;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.toast-icon-wrap {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: var(--toast-bg);
|
||||
color: var(--toast-color);
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #6b7385;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.toast-close:hover {
|
||||
opacity: 1;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #e8eaf0;
|
||||
}
|
||||
|
||||
/* Transition animations */
|
||||
.toast-enter-active {
|
||||
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.toast-leave-active {
|
||||
transition: all 0.25s ease-in;
|
||||
}
|
||||
.toast-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(60px) scale(0.92);
|
||||
}
|
||||
.toast-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(60px) scale(0.92);
|
||||
}
|
||||
.toast-move {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { buttonVariants } from '.'
|
||||
import type { ButtonProps } from '.'
|
||||
|
||||
const props = withDefaults(defineProps<ButtonProps>(), {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
disabled: false,
|
||||
type: 'button',
|
||||
})
|
||||
|
||||
const classes = computed(() =>
|
||||
cn(buttonVariants({ variant: props.variant, size: props.size }), props.class),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button :type="type" :disabled="disabled" :class="classes">
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { type VariantProps, cva } from 'class-variance-authority'
|
||||
|
||||
export { default as Button } from './Button.vue'
|
||||
|
||||
export const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
||||
destructive:
|
||||
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||
outline:
|
||||
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
secondary:
|
||||
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-4 py-2',
|
||||
sm: 'h-8 rounded-md px-3 text-xs',
|
||||
lg: 'h-10 rounded-md px-8',
|
||||
icon: 'h-9 w-9',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export type ButtonVariants = VariantProps<typeof buttonVariants>
|
||||
export interface ButtonProps {
|
||||
variant?: ButtonVariants['variant']
|
||||
size?: ButtonVariants['size']
|
||||
class?: HTMLAttributes['class']
|
||||
disabled?: boolean
|
||||
type?: 'button' | 'submit' | 'reset'
|
||||
}
|
||||
Reference in New Issue
Block a user